IE中的列表项之后的边距 [英] Margin after list items in IE

问题描述

我使用此代码显示< ul> ：

 < UL> 
< li class =oddid =lid-3> Breakbeat< / li> 
< li class =evenid =lid-11>古典< / li> 
< li class =oddid =lid-16> Downbeat< / li> 
< li class =evenid =lid-30> Filmmusik< / li> 
< li class =oddid =lid-24> Folk& amp; Country< / li> 
< li class =evenid =lid-40>爵士/蓝调< / li> 
< li class =oddid =lid-48>拉丁语< / li> 
< li class =evenid =lid-64> Pop / Mainstream< / li> 
< li class =oddid =lid-68> Reggae< / li> 
< li class =evenid =lid-75> Rock< / li> 
< li class =oddid =lid-81> Techno / Electro< / li> 
< li class =evenid =lid-35>城市< / li> 
< li class =oddid =lid-88>全球< / li> 
< / ul> 
  

而这个CSS：

  ul span {
 display：block; 
 padding：1px 0 1px 5px; 
光标：指针; 
 font-size：12px; 
} 
 
 ul {
 padding：0; 
保证金：0; 
 overflow：hidden; 
} 
 
 ul li {
 padding：0px 0 2px 5px; 
光标：指针; 
 height：14px; 
保证金：0; 
 display：block; 
 overflow：hidden; 
职位：亲属; 
} 
  

无论我做什么，列表项都有一个底部边距。它从何而来？如何解决这个问题？

解决方案

将li上的行高设置为1em - 这将使行高与font-size一样。

更好的是，将line-height设置为1.4，这使得它有一个很好的间距，所以项目不会一起运行。 / p>

这意味着如果你增加字体的大小，你不需要在li中改变行高，如果你这样做，用户设置更大的字体大小。

I am using this code to show a <ul>:

<ul>
  <li class="odd"  id="lid-3">Breakbeat</li>
  <li class="even" id="lid-11">Classical</li>
  <li class="odd"  id="lid-16">Downbeat</li>
  <li class="even" id="lid-30">Filmmusik</li>
  <li class="odd"  id="lid-24">Folk&amp;Country</li>
  <li class="even" id="lid-40">Jazz/Blues</li>
  <li class="odd"  id="lid-48">Latin</li>
  <li class="even" id="lid-64">Pop/Mainstream</li>
  <li class="odd"  id="lid-68">Reggae</li>
  <li class="even" id="lid-75">Rock</li>
  <li class="odd"  id="lid-81">Techno/Electro</li>
  <li class="even" id="lid-35">Urban</li>
  <li class="odd"  id="lid-88">World</li>
</ul>

And this CSS:

ul span {
    display: block;
    padding: 1px 0 1px 5px;
    cursor: pointer;
    font-size: 12px;
} 

ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

ul li {
    padding: 0px 0 2px 5px;
    cursor: pointer;
    height: 14px;
    margin: 0;
    display: block;
    overflow: hidden;
    position: relative;
}

Whatever I do, the list items have a bottom margin. Where does it come from? How can I solve that problem?

解决方案

Set the line-height on the li to 1em - this will make the line-height the same as the font-size.

Even better, set the line-height to 1.4, which gives it a nice spacing so the items don't run together.

This will mean if you increase the size of the font, you won't need to also change the line-height within the li's if you do - and will update if a user sets a larger font-size.

这篇关于IE中的列表项之后的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！