html - 如何在 header 包装器中使导航宽度为 100%

Question

我正在尝试制作一个宽度为 100% 的导航栏，它在宽度也为 100% 的标题中平均分布。此外，每个 a 元素都有两个单词，它们彼此完美居中对齐。

我正在使用的 HTML 如下:

<div class="nav">
  <ul>
  <li><a href="#"><span style="font-family:sacramento; text-align: center;">Our</span><br> HOME</a></li>
  <li><a href="#"><span style="font-family:sacramento;text-align: center;">About</span><br> US</a></li>
 <li><a href="#"><span style="font-family:sacramento;text-align: center;">Client</span><br> WORKS</a></li>
 <li><a href="#"><span style="font-family:sacramento;text-align: center;">Contact</span><br> US</a></li>
 <li><a href="#"><span style="font-family:sacramento;text-align: center;">Our</span><br> VISION</a></li>
 <li><a href="#"><span style="font-family:sacramento;text-align: center;">Our</span><br> BIOS</a></li>
 </ul>
 </div><!--end of nav-->

我正在使用的 CSS

.nav {
position: relative;
width: 100%;
text-align: center;
 }
 .nav ul {
margin: 0;
padding: 0;
 }
 .nav li {
margin: 25px 80px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
text-align: center;
 }
 .nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 20px;
width: 10px;

   }

我尝试制作的示例如下所示:

更新

当我在 IE9 中尝试代码时，我得到了这个图像:

请问我该如何解决。

Answer 1

要平均分配所有元素，请在列表元素上设置百分比宽度。您有六个元素，所以添加 width: 16%;到 .nav li规则。

居中对齐文本更改:

 .nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;

   }

到(删除显式宽度并添加显示: block ):

 .nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
display: block;
   }

最后删除display: inline-block来自 .nav li规则并添加 float: left .您还应该添加 <div style="clear: both"></div>列表下方的元素(标记)以“修复”页面流。