Question

我正在尝试创建一个水平列表，类似这样的

<nav class="tabs">
    <ul>
        <li class="active">
            <a>Bar Foo</a>
        </li>
        <li>
            <a>Foo Bar</a>        
        </li>
    </ul>
</nav>

问题是，只有1个li元素可以使用（如this），但是2个第一个li项目位置不正确（如this）

有人可以向我解释发生了什么事吗？

更新：在锚点上删除类型为“活动”的类型！

Answer 1

从第一个列表项标记中删除活动类。

<nav class="tabs">
    <ul>
        <li> <-- Here
            <a class="active">Bar Foo</a>
        </li>
        <li>
            <a class="active">Foo Bar</a>        
        </li>
    </ul>
</nav>

OR

<nav class="tabs">
    <ul>
        <li class="active">
            <a>Bar Foo</a>
        </li>
        <li class="active">
            <a>Foo Bar</a>        
        </li>
    </ul>
</nav>

Answer 2

无需使用绝对定位。请按以下步骤操作：

li.active a {
    color: #abc522;
    padding: 20px 40px 13px;
    width: 146px;
    background-color: white;
}

fiddle

css：仅具有2个或更多li元素的水平列表定位问题

2 个答案: