浮动的li元素 - 父元素宽度

Question

我想在ul ul中将<li>向左浮动，而不必为内部的<ul>元素设置宽度
问题在于<ul>位于带有width:70px;的nav中 （请查看jsfiddle）

以下是代码（http://jsfiddle.net/qfemF/）：

CSS：

nav {
    width:70px;
}

ul {
    margin:0;
    padding:0;
    list-style:none;
}

li {
    position:relative;
}

ul ul {
    position:absolute;
    left:70px;
    width:auto;
}

ul ul li {
    float:left;
}

HTML:

<nav>
    <ul>
        <li><a href="">Test</a>
            <ul>
                <li><a href="">sub1</a></li>
                <li><a href="">sub2</a></li>
            </ul>
        </li>
    </ul>
</nav>

如果我设置例如 ul ul { width:200px; }，它可以工作，我也尝试了 width:auto，但那不起作用。

- Aaroniker

Answer 1

这是因为你在CSS中对

设置了position:relative。
删除CSS中的这一行，问题就会解决：

li { position:relative; }

请查看演示以查看其工作原理。

演示

---

更新：（根据OP的新评论）
您应该为 ul ul 指定一个具有固定像素的 width。

ul ul {
    ....
    width:200px;      /* instead of width:auto; */
}

请查看演示以了解其工作原理。

演示

- Carl0s1z

---

谢谢！如果我将导航设置为 position:fixed;，你也有解决方案吗？http://jsfiddle.net/qfemF/10/ - Aaroniker

请检查我的更新 ;) 希望您可以设置第二个 ul 的宽度。 - Carl0s1z

谢谢！但不幸的是没成功 :/ 或许我应该使用JS来设置宽度，但这样不够优雅。 - Aaroniker

如果为True，则会获得内联代码，而不是在样式表中。 - Carl0s1z

Answer 2

C Travel的回答是正确的，您需要从li中删除position: relative;

但如果由于某种原因您无法这样做，另一种选择是在ul ul上设置display: table;

演示

- Andy

---

你可以使用 display:table;，但即使如此，当你添加更多的列表项时，它仍然不起作用。请检查具有更多列表项的示例 http://jsfiddle.net/qfemF/9/ - Carl0s1z

没有问题，仍然有解决他的问题的方法，当有两个列表项时。 - Carl0s1z