css:水平列表定位问题仅适用于 2 个或更多 li 元素

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 )

谁能给我解释一下这是怎么回事？

更新:删除 anchor 上类为“active”的类型!

Answer 1

无需使用绝对定位。只需执行以下操作:

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

fiddle