Question

我写了以下html页面

<!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;
}
#nav ul {
    list-style:none;
    margin: 0 auto;     
        width: 19.5em; 
} 
#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 g

我在

部分做了一些小改动

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

将边距从.25em更改为.5 em，现在显示如下

enter image description here 如果你看到关于这件事的事情已经出来，我不清楚是什么东西导致了这种行为，只是通过改变保证金怎么会发生这种情况？

根据以下建议我尝试改变如果我删除宽度列，并且如果我删除浮动：左列，则所有框都是垂直的即，我做了

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

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

}

它如下 enter image description here

为什么会发生这种情况

Answer 1

这是因为您的#nav ul具有固定宽度width: 19.5em。

现在，如果您更改内部width元素的padding或margin或li，则需要更改ul的总数。< / p>

Answer 2

通过为您的代码添加边距，您已经增加了内部元素的整体宽度，但您仍然限制为19.5em。

您可以删除宽度声明或增加宽度。

Answer 3

这是因为内容宽于包含元素的宽度。调整它：

#nav ul {
  list-style:none;
  margin: 0 auto;     
  width: 19.5em; <- change this to 21em
}

另外，为什么不使用html5元素而不是带ID的div？

Answer 4

您的#nav ul元素的宽度为19.5em。

您的#nav ul li a元素有0.5em填充和0.5em边距。宽度方面，每个元素加上2em + 2px（边框）。这意味着你的4个元素的宽度为8em + 8px ，没有任何文本。

这允许总共11.5em宽度包含元素中找到的文本。如果累积文本超过11.5em，那么您的元素将换行到下一行。

要解决此问题，只需增加#nav ul元素的宽度：

#nav ul {
    width: 25em; /* Adjust accordingly. */
}

Answer 5

当您在EM中加倍边距时，它将超过您对整个nav的宽度。此外，您的CSS中隐藏了float:left。我会建议删除float:left并改为display:inline-block，就像这样。

#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
display: inline-block; 
list-style:none;
margin: 0 auto;     
} 
#nav ul li {
display: inline-block; 
font-weight: normal;
text-transform: uppercase;
}

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

HTML

<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>

Answer 6

您必须做的唯一更改是对您应用此css：

#nav ul {
  display: block; 
  list-style: none;
  text-align: center;
}
#nav ul li {
  display: inline-block; 
  text-transform: uppercase;
}

为css添加边距会导致一些不需要的行为

6 个答案: