我使用此代码显示<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&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>
这个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;
}
无论我做什么,列表项都有底边。它从何而来?我该如何解决这个问题?
答案 0 :(得分:1)
将li上的行高设置为1em - 这将使行高与font-size相同。
更好的是,将行高设置为1.4,这样可以使它有一个很好的间距,这样物品就不会一起运行。
这意味着如果你增加字体的大小,你也不需要改变li中的行高 - 如果用户设置更大的字体大小,则会更新。
答案 1 :(得分:0)
你的身高是14px ....如果你添加一个14px的行高,它应该解决问题:
ul li {
cursor: pointer;
display: block;
height: 14px;
line-height: 14px;
overflow: hidden;
padding: 0 0 2px 5px;
position: relative;
}
编辑: 实际上16 12效果更好:
ul li {
padding: 0px 0 2px 5px;
cursor: pointer;
height: 16px;
line-height:12px;
margin: 0;
display: block;
overflow: hidden;
position:relative;
}
答案 2 :(得分:0)
保持相同的标记,并用此替换所有CSS;
ul {
padding: 0;
margin: 0;
}
ul li {
padding: 0;
margin: 0;
}