html - 对齐列表元素内的文本

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 个项目设置为每个 200 像素。当使用 firefox 的 firebug 时，列表会下降一行，并且在列表中的最后一项下降一行之前，我的宽度最大为 189px。我不得不改变显示：内联；浮动：左；因为我需要这些项目是内联的，但能够同时使文本居中。有谁知道为什么 5 个没有填充或边距设置的对象上的 200px 不允许该行位于 1 个单行上？

Answer 1

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

.christmas_links ul {
    padding:0;
}

JSFiddle 演示。