0

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

在此处输入图像描述并且输出如下

我在该部分做了一个小改动

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

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

在此处输入图像描述 如果你看到关于事情已经出来了，我不清楚是什么事情导致了这种行为，只是通过改变边距怎么会发生这种情况？

根据下面的建议，如果我删除宽度列，我尝试更改，如果我删除 float:left 列，那么所有框都是垂直的，即如果我这样做

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

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

}

它如下 在此处输入图像描述

为什么会这样

4

6 回答 6

0

那是因为你#nav ul有一个固定的宽度width: 19.5em。

现在，如果您更改内部元素的widthor paddingor ，则需要更改.marginliul

于 2013-11-01T15:28:51.803 回答
0

通过为标签添加边距，您增加了 内元素的整体宽度，但您仍然限制为 19.5em。

您可以从您的宽度声明中删除或增加其宽度。

于 2013-11-01T15:29:00.827 回答
0

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

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

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

于 2013-11-01T15:30:30.460 回答
0

您的#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. */
}
于 2013-11-01T15:32:15.487 回答
0

当您在 EM 中加倍您的保证金时，它将超过您对整个nav. 此外，您还float:left隐藏在 CSS 中。我建议像这样摆脱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>
于 2013-11-01T15:33:57.093 回答
0

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

#nav ul {
  display: block; 
  list-style: none;
  text-align: center;
}
#nav ul li {
  display: inline-block; 
  text-transform: uppercase;
}
于 2013-11-01T15:44:02.203 回答