Html 向css添加边距会导致一些不必要的行为_Html_Css_Navigation

Html 向css添加边距会导致一些不必要的行为

html css navigation

Html 向css添加边距会导致一些不必要的行为,html,css,navigation,Html,Css,Navigation,我写了下面的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 navigati

我写了下面的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>

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

如果你看到关于这件事的报道，我不清楚是什么导致了这种行为，仅仅通过改变保证金，这怎么会发生

根据下面的建议，我试着改变如果我删除了width列，如果我删除了float:left列，那么所有框都是垂直的 i、如果我这样做

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

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

}

具体如下

为什么会发生这种情况

这是因为您的

#nav ul

具有固定宽度

宽度：19.5em

现在，如果您更改

li

元素内部的

宽度

或

填充

或

边距

，则需要通过向标记添加边距来更改

ul

的总宽度，您已经增加了元素内部的总宽度，但您仍然限制为19.5em

您可以从中删除宽度声明，也可以增加其宽度。

这是因为内容比包含元素的宽度宽。将其调整为：

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

#导航ul{
列表样式：无；
保证金：0自动；
宽度：19.5em；您的#nav ul
元素的宽度为19.5em
您的#nav ul li a
元素有0.5em的填充和0.5em的边距。按宽度计算，每个元素加起来是2em+2px（边框）。这意味着您的4个元素有8em+8px的宽度，没有任何文本
这允许总共11.5em的宽度包含在元素中找到的文本。如果累计文本超过11.5em，则元素将换行到下一行
要解决此问题，只需增加#nav ul
元素的宽度：
#导航ul{
宽度：25em；/*相应调整*/
}
当你将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







您必须做的唯一更改是重新应用此css：
#nav ul {
  display: block; 
  list-style: none;
  text-align: center;
}
#nav ul li {
  display: inline-block; 
  text-transform: uppercase;
}

你期望发生什么？尝试更改ul…好的，如果我删除宽度列，我观察到所有框都向左移动，如果我删除float:left列，那么所有框都是垂直的。好的，如果我删除宽度列，我观察到所有框都向左移动，如果我删除float:left列，那么所有框都是垂直的e框垂直确定我更新了问题我删除了边距和浮动
<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>

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