0

这是一个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>

如下所示 在此处输入图像描述

好像css在哪里

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

然后出现以下 在此处输入图像描述 我无法理解float:left上述图像中的行为。为什么在第二种CSS中它会一一下降？和第一个一样，它会在哪里正确出现？

4

3 回答 3

0

和似乎冲突margin:0 auto。float:left要使导航居中，请放置margin:0 auto在#nav.

编辑：忘了提到浮动后清除。

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

于 2013-11-01T19:48:36.783 回答
0

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

于 2013-11-01T19:56:59.430 回答
0

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

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

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

于 2013-11-08T16:23:01.723 回答