Question

我有以下HTML水平列表：

<div id="menu">
    <ul>
        <li class="menu_item">
            <a href="#">
                Item1
            </a>
        </li>
        <li class="menu_item">
            <a href="#">
                Item2
            </a>
        </li>
        <li class="menu_item">
            <a href="#">
                Item3
            </a>
        </li>
        <li class="menu_item">
            <a href="#">
                Item4
            </a>
        </li>
        <li class="menu_item">
            <a href="#">
                Item5
            </a>
        </li>
    </ul>
</div>

使用以下CSS设置样式：

#menu {
    position: relative;
    width: 715px;
    height: 40px;
}

#menu > ul {
    display: block;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    width: 100%;
    height: 100%;
}

#menu > ul > li {
    display: table;
    height: 100%;
    text-align: center;
    float: left;
    border-right: 1px solid black;
    width: 142px !important;
}

Firefox正确显示;但是，在Chrome中，所有项目的宽度都是141px而不是142.我不能只将数字增加1，因为它在Firefox中会太宽而且不适合一行。

我该怎么办？请帮忙。

编辑：屏幕截图：
Chrome列表：img694.imageshack.us/img694/5088/chromelist.png
Firefox列表：img840.imageshack.us/img840/8689/firefoxlist.png

编辑2：如果我从'ul'删除border-top和-bottom并添加到'li'，那么在Chrome中它不再是141px而是... 143px。我不知道改变垂直边界会如何影响宽度......

Answer 1

如果您移除display: table;，他们的行为应该相同。

您需要添加list-style-type:none和一些填充以对齐文本。

Firefox和Chrome中的水平列表项宽度不同

1 个答案: