Question

我希望float <li>转到ul ul中的左 - 而不将width设置为内部<ul>元素
问题是<ul>位于nav width:70px; （看看jsfiddle）

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>

如果我设置e.x. ul ul { width:200px; }它有效，我也尝试了width:auto - 但这样做很有效。

Answer 1

这是因为您在css中的position:relative上设置了<li>。
在你的CSS中删除这一行，它应该没问题：

li { position:relative; }

检查 demo 以查看其工作情况。

<强> DEMO

更新： （来自OP的新评论后）
你应该给ul ul width一个固定的像素。

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

检查 demo 以查看其工作情况。

<强> DEMO

Answer 2

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

但如果您出于某种原因无法做到这一点，另一种方法是在display: table;上设置ul ul

Demo

<ul> - float li＆＃39; s - 父元素宽度</ul>

2 个答案: