如何在页眉包装内制作100％宽度的导航

我正在尝试制作一个宽度为100％的导航栏，该页面也具有100％宽度的标题。同样每个a元素都有两个词，每个词都完美对齐。如何在页眉包装内制作100％宽度的导航

我正在使用的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; 

    }

的例子工作，我努力使看起来像下面这样：

UPDATE

当我尝试在IE9的代码，我得到这个图片：

请我怎样才能解决这个问题。

来源

2013-02-17 Olubunmi

要分发同样设置列表项的百分比宽度的所有项目。您有六个项目，因此将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; 
    }

最后从.nav li规则中删除display: inline-block和添加float: left。您还应该在列表下方添加一个<div style="clear: both"></div>元素（标记）以“修复”页面流。

来源

2013-02-17 11:52:09 kjetilh

谢谢。此解决方案有效。但我有一点问题。请参阅更新。 – Olubunmi 2013-02-17 12:18:18

我在处理该问题的答案底部添加了一个段落。 – kjetilh 2013-02-17 12:27:21

谢谢kjetilh，当我添加float时：right，均匀分布不起作用。因此，空格留在左侧，当我做了float时：left，右侧是空格。我增加了宽度：13％;以便分发li – Olubunmi 2013-02-17 12:33:49

入住此的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; 



     }

来源

2013-02-17 11:48:53 Shail

谢谢。此解决方案有效。但我有一点问题。请参阅更新。 – Olubunmi 2013-02-17 12:17:41

在IE9中完美适合我。 – Shail 2013-02-18 12:24:35

如何在页眉包装内制作100％宽度的导航

回答

相关问题