在最后的 HTML 中，IE 和 Firefox 中显示的无序列表后有不需要的空格 <li>无法通过减小 ul 宽度删除的元素。任何人都知道如何删除空间？谢谢。
#menubar {
width:249px;
margin:0 auto;
list-style:none;
border:1px solid grey;
border-radius:3px;
margin-top:5px;
padding:0;
height:26px;
}
.toggle {
margin:0;
line-height:16px;
float:left;
border-right: 1px solid grey;
padding:5px 8px 5px 8px;
}
.selected {
background-color:grey;
}<body>
<ul id="menubar">
<li class="toggle selected">HTML</li>
<li class="toggle">HTML</li>
<li class="toggle">HTML</li>
<li class="toggle selected" style="border-right:none;">HTML</li>
</ul>
</body>最佳答案
不要在 ul 上指定固定宽度，而是让它显示为 inline-block。 (如果您需要它水平居中，则在父元素上使用 text-align:center。)
div {
text-align:center;
}
#menubar {
display:inline-block;
margin:0 auto;
list-style:none;
border:1px solid grey;
border-radius:3px;
margin-top:5px;
padding:0;
height:26px;
text-align:left; /* reset text-align for list contents, if necessary */
}
.toggle {
margin:0;
line-height:16px;
float:left;
border-right: 1px solid grey;
padding:5px 8px 5px 8px;
}
.selected {
background-color:grey;
}<body>
<div>
<ul id="menubar">
<li class="toggle selected">HTML</li>
<li class="toggle">HTML</li>
<li class="toggle">HTML</li>
<li class="toggle selected" style="border-right:none;">HTML</li>
</ul>
</div>
</body>关于html - 无序列表项后的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30923637/