相等和全寬度導航

我正在爲我的HCI類的Web應用程序工作，並遇到導航問題。我試圖讓我的導航成爲整個屏幕的寬度，每個文本塊都是相同的。我有十個總項目。我還想在文本上方添加一個圖標，但這仍在工作中。我當前的代碼將文本對齊到左側，並且沒有展開導航的全部寬度。任何幫助都會很棒。相等和全寬度導航

HTML：

<nav> 
    <div id = "location"><a href=」」>Location</a></div> 
    <div id = "weather"><a href=」」>Weather</a></div> 
    <div id = "waterlevels"><a href=」」>Water Levels</a></div> 
    <div id = "wavereports"><a href=」」>Wave Reports</a></div> 
    <div id = "runs"><a href=」」>Current Runs</a></div> 
    <div id = "hatches"><a href=」」>Hatches</a></div> 
    <div id = "photogallery"><a href=」」>Photo Gallery</a></div> 
    <div id = "anglermaps"><a href=」」>Angler Maps</a></div> 
    <div id = "recipes"><a href=」」>Recipes</a></div> 
    <div id = "meetups"><a href=」」>Meet Ups</a></div> 
</nav>

CSS：

nav { 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
    -webkit-box-orient:horizontal; 
    -moz-box-orient:horizontal; 
    box-orient:horizontal; 
    border-bottom:2px solid #111; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    background:white; 
} 

nav a { 
    display:block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    color:#111; 
    padding:10px; 
    -webkit-box-flex:1; 
    -moz-box-flex:1; 
    box-flex:1; 
    text-align:center; 
    text-decoration:none; 
    -webkit-transition:all .4s linear; 
    -moz-transition:all .4s linear; 
    -o-transition:all .4s linear; 
    transition:all .4s linear; 
}

來源

2012-10-23 Ben

HTML上的div尚未應用於CSS中。 – Ben

這是更接近你想要的東西一點點的<div>？

你不需要div元素和錨點。使用顯示模塊時，錨具有與div類似的特徵。

像這樣：

<a id="meetups" href=」」>Meet Ups</a>

http://jsfiddle.net/dm6Sp/2/

編輯：我沒有刻意去重新格式化撥弄你的代碼，所以你可能要採取一看它自己固定它使用前它。它的作品，它不是很漂亮。 :)

來源

2012-10-23 14:29:03 Askanison4

究竟是什麼樣的財產造成了這種情況你知道嗎？ – Ben

謝謝你@ Askanison4 – Ben

問題在於你在div中嵌套錨，所以div使用它自己的屬性以及你的標籤。這是更整潔和更合適的做事方式:) – Askanison4

也許它複製粘貼錯誤，但這是不正確的HTML：

<div id = "location"><a href=」」>Location</a></div>

有id & =之間的空間& "，那麼你的鏈接出現故障，由於缺少一個URL甚至是一個佔位符#

也許這可以解決一些瀏覽器問題。

那麼你的問題，試試這個：

nav { 
    text-align: center; 
} 
nav a { 
    display:inline-block; 
    margin: 0 auto; 
    width: auto; 
    color:#111; 
    padding:10px; 
    -webkit-box-flex:1; 
    -moz-box-flex:1; 
    box-flex:1; 
    text-align:center; 
    text-decoration:none; 
    -webkit-transition:all .4s linear; 
    -moz-transition:all .4s linear; 
    -o-transition:all .4s linear; 
    transition:all .4s linear; 
}

刪除圍繞你的鏈接

來源

2012-10-23 14:28:58 Mark

相等和全寬度導航

回答

相關問題