1

我正在尝试制作一个宽度为 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 中尝试代码时，我得到了这个图像：

请问我该如何解决这个问题。

4

2 回答 2

0

检查这个 JSfiddle：JSfiddle 工作

在此处查看结果 导航结果

使用这个 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;



        }
于 2013-02-17T11:48:53.650 回答
0

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

   }

到（删除显式宽度并添加显示：块）：

 .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>在列表（标签）下方添加一个元素来“修复”页面流。

于 2013-02-17T11:52:09.977 回答