Question

这是一个css

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">


/* styles for navigation */
#nav {
    background-color: #2322ff;
    height: 3em;
    width:70em;
}
#nav ul {
    list-style:none;
    margin: 0 auto;     

} 
#nav ul li {
    font-weight: normal;
        text-transform: uppercase;
    float:left;
}

 #nav ul li a {     
  display: block;   
  padding: .5em;    
  border: 1px solid #ba89a8; 
  border-radius: .5em;  
  margin: .25em; 

}    
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">House</a></li>
<li><a href="">Baby</a></li>
<li><a href="">More</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<!-- end #content -->
</body>
</html>

如下所示 enter image description here

就好像css正在关注

}
#nav ul {
    list-style:none;
    margin: 0 auto;     
    float:left;
}

然后出现以下内容 enter image description here 我无法理解上面图片中float:left的行为。为什么第二种css逐一下降？在第一个它正确到来的地方？

Answer 1

margin:0 auto和float:left似乎有冲突。要使导航中心，请将margin:0 auto放在#nav上。

编辑：在浮动之后忘记提及清除。

编辑：也许我应该首先询问你为什么要浮动ul。

Answer 2

float的正常行为是根据内容/子长度调整容器大小。在第一种情况下，LI以单行形式出现，因为父节点能够提供完整的宽度。但是在第二个的情况下，UL根据其子女巫的最大宽度进行调整大小。而且，因此它们出现在彼此之下。

Answer 3

好的，这是第二个代码的问题。在第一种情况下float:left;时，您将其应用于<li>元素，因此每个<li>都会浮动到左侧。

在第二种情况下，您将float:left;应用于<ul>元素。 CSS确实正常工作，将容器浮动到左侧，使<li>元素保持不变。所以他们像往常一样堆叠在一起，因为你没有告诉他们不这样做。

滴水和John没有看到问题的原因是你没有告诉我们在第二种情况下，你也从float:left;样式中删除了<li>。在将来，如果您创建一个jsFiddle就像它们确实显示您正在使用的代码一样，它会非常有用。如果您需要更多解释，请告诉我，我很乐意尝试澄清它。

float在css中的行为

3 个答案: