css - 为什么 float div 停止列表链接元素 float

Question

如果我将 #nav li a 设置为 float:left 然后它会水平显示列表

但是如果我执行 #nav{ float:right;} 列表向右浮动但垂直显示

如果我只使用 #nav li { float:left} 它工作正常，但为什么在使用 aselected 时 float 会发生变化？

<div id="header">


        <ul id="nav">
            <li><a href="#">aaa</a></li>
            <li><a href="#">bbb</a></li>
            <li><a href="#">ccc</a></li>

        </ul>



</div> 

CSS

#header{
width:600px;
height:160px;
background-color:#DDD;
border-top: solid 1px #DDD; 

}

#nav {
list-style: none;
float: right; 
}

#nav li{
float:left; /* if I have the "float:left" here it will always display horizontally
}


#nav li a{
             /*if I float:left here instead of in "#nav li" it only works if "#nav" isn't floated
padding: 10px;
background-color: #888;
color:222;
text-decoration: none;

}

Answer 1

当你说 #nav li a { float:left; ，a 元素将 float 在 li 中并保持垂直于彼此之上。

JSFiddle

但是如果你还添加了#nav li { list-style-type: none; 列表元素将折叠，因为不再有内容，然后 a 标签将水平显示。

JSFiddle

现在，如果你执行 #nav { float:right; }，a 将显示为垂直堆叠，因为 nav 仅占据必要的宽度。

JSFiddle

如果你使用#nav li { float:left; } 而不是从一开始，无论如何链接都会水平显示。因为现在，不是li里面的a，而是ul里面的li向左浮动。

JSFiddle