2010-03-05 58 views
1

我有一个水平列表,我已经在li标签上放置了边界以便将它们分开。它所有的工作很好,但我对李的这使得比文字更高的边界上一些神秘的填充:奇怪的顶部填充水平列表项目

http://img641.imageshack.us/img641/3706/picture13y.png

我已经与填充和利润发挥各地,但我不能想出什么造成这种情况。有什么建议么?

下面是HTML:

<div id="top_center"> 
<ul> 
<li><a href="#">(1 New)</a></li> 
<li><a href="#">Verified Account</a></li> 
<li><a href="#">Prefrences</a></li> 
</ul>   
</div> 

的CSS:

/* -------------------------------------------------------------- 

    typography.css 
    * Sets up some sensible default typography. 
    * Based on the typography.css portion of Blueprint CSS @ http://blueprintcss.org/ 

-------------------------------------------------------------- */ 

/* Default font settings. 
    The font-size percentage is of 16px. (1 * 16px ~ 16px) */ 
body { 
    padding: 0px; 
    margin: 0px; 
    font-size: 100%; 
    color: #313131; 
    background: #fff; 
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
} 


/* Headings 
-------------------------------------------------------------- */ 

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #313131; } 

h1 { text-transform: none; text-decoration: none; font-style: normal; font-weight: normal; letter-spacing: -0.01em; font-size: 30px; font-family: Georgia, "Times New Roman", Times, serif;line-height: 1; margin-bottom: 0.5em; } 
h2 { margin-bottom: 0.75em; text-decoration: none; font-size: 1.13em; } 
h3 { font-size: .88em; line-height: 1; margin-bottom: 1em; color: #767676; } 
h4 { font-size: .88em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.25; margin-bottom: 1.25em; } 
h5 { font-size: .75em; margin-bottom: 1.5em; } 
h6 { font-size: .75em; font-weight: bold; } 

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img { 
    margin: 0; 
} 


/* Text elements 
-------------------------------------------------------------- */ 

p   { margin: 0 0 1.5em; } 
p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } 
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } 

a:focus, 
a:hover  { color: #94c909; } 
a   { color: #7aa807; text-decoration: underline; } 
h5 a, #top_center li a {text-decoration: none; font-size: .75em; padding-top: 0px;} 

blockquote { margin: 1.5em; color: #666; font-style: italic; } 
strong  { font-weight: bold; } 
em,dfn  { font-style: italic; } 
dfn   { font-weight: bold; } 
sup, sub { line-height: 0; } 

abbr, 
acronym  { border-bottom: 1px dotted #666; } 
address  { margin: 0 0 1.5em; font-style: italic; } 
del   { color:#666; } 

pre     { margin: 1.5em 0; white-space: pre; } 
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } 


/* Lists 
-------------------------------------------------------------- */ 

li ul, 
li ol  { padding-top: 0px; padding-left: 0; margin-left: 0; margin-bottom: 0; margin-right: 1.5em; margin-top: 0; } 
ul, ol  { padding-left: 0; margin-left: 0px; margin-bottom: 1.5em; margin-right: 1.5em; margin-top: 0; } 

ul   { list-style-type: none; } 
ol   { list-style-type: decimal; } 

dl   { margin: 0 0 1.5em 0; } 
dl dt  { font-weight: bold; } 
dd   { margin-left: 1.5em;} 


/* Tables 
-------------------------------------------------------------- */ 

table  { margin-bottom: 1.4em; width:100%; } 
th   { font-weight: bold; } 
thead th  { background: #c3d9ff; } 
th,td,caption { padding: 4px 10px 4px 5px; } 
tr.even td { background: #e5ecf9; } 
tfoot  { font-style: italic; } 
caption  { background: #eee; } 


/* Misc classes 
-------------------------------------------------------------- */ 

.small  { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } 
.large  { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } 
.hide  { display: none; } 

.quiet  { color: #666; } 
.loud  { color: #000; } 
.highlight { background:#ff0; } 
.added  { background:#060; color: #fff; } 
.removed { background:#900; color: #fff; } 

.first  { margin-left:0; padding-left:0; } 
.last  { margin-right:0; padding-right:0; } 
.top  { margin-top:0; padding-top:0; } 
.bottom  { margin-bottom:0; padding-bottom:0; } 



#top  { height: 53px; width: 100%; background-repeat: repeat-x; background-image: url(img/top_bg.jpg); } 
#top_center  { height: 53px; margin: 0 auto; width: 950px; } 
#top_center ul {float: right; margin-top: 10px; padding-top: 0px;} 
#top_center li { display: inline; padding-left: 7px; padding-right: 7px; padding-top: 0px; border-left-color: #b3b3b3; border-left-width: 1px; border-left-style: solid;} 
#top_center li:first-child { border: none;} 
#top_center li img { margin-right: 7px; } 
+1

检查它使用Firebug的“布局”视图,它可能是一些其他的样式定义干扰。 –

+0

在Firefox中看起来不错。也许你在某处有'a'标签的其他样式定义? –

+0

嗯也许在我的CSS其他东西...我会reedit的职位,包括一切。 – Thomas

回答

0

这可能是因为你降低链接的文字大小。
更新:您减小字体大小在这里:

h5 a, #top_center li a {text-decoration: none; font-size: .75em; padding-top: 0px;} 

然后文本被对齐框的底部。 垂直居中它们,你可以这样做:

#top_center a { 
    vertical-align: middle; 
    } 

更新2: 好与你的整个CSS不能正确莫名其妙对齐。但是,这对我的作品:

#top_center a { 
    display: table-cell; 
    vertical-align: middle; 
    } 

参考:vertical-align

+0

你有这个工作?它似乎将我列表中的列表元素堆叠起来。 – Thomas

+0

@Thomas:适合我。 –

+1

要垂直居中文本,可以设置等于元素容器高度的行高。它是交叉浏览器兼容的,因为垂直对齐不会以相同的方式在任何地方工作。 – easwee