Question

我最初使用的一些li元素存在问题

我目前有我的HTML

<div class="christmas_links">
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>

我的css

.christmas_links{
width:1000px;
margin:0px auto;
padding:0px;
}
.christmas_links ul li{
list-style-type:none;
padding:0px;
margin:0px;
}
.christmas_links li{
float:left;
padding:0px;
margin:0px;
width:200px;
text-align:left;
}

我的问题是即使我有5个项目设置为200px每个。当使用firefox的firebug时，列表会下降一行，并且在列表中的最后一项下拉一行之前，我的宽度最大为189px。我不得不改变显示：内联;漂浮：左;因为我需要内联的项目，但能够同时使文本居中。有谁知道为什么在没有填充或边距设置的5个对象上200px不允许该行在1行上？

Answer 1

您尚未删除大多数浏览器应用于padding元素的默认ul。只需添加：

.christmas_links ul {
    padding:0;
}

JSFiddle demo

对齐列表元素内的文本

1 个答案: