如何在标题包装器中使导航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

检查此JSfiddle：JSfiddle working

在此处查看结果Result of navigation

使用此css

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



        }

Answer 2

要分配所有项目，请在列表项目上平均设置百分比宽度。您有六个项目，因此请将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;

   }

to（删除了显式宽度并添加了display：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>元素以“修复”页面流。