如何在頁眉包裝內製作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％寬度的導航

回答

相關問題