導航欄整個寬度間隔的項目均勻

我對CSS有點新。我正在嘗試製作一個水平導航欄，僅包含3個用於查看移動設備的文本項目。我將寬度設置爲100％，並將每個部分的寬度設置爲32％（我嘗試了33％，但它將第三個項目放在一個新行中）。它看起來很好，但是當我懸停時（或者單擊使用移動設備）背景顏色會發生變化，您可以看到邊距。導航欄整個寬度間隔的項目均勻

ul.nav { 
    width:100%; 
    margin:0 auto; 
    padding:0; 
    list-style:none; 
    display:inline-block; 
    background-color:#62564A; 
    text-align:center; 
    font-family: sans-serif; 
} 

.nav li { 
     display:inline; 
    } 

.nav a { 
    width:33%; 
    text-align:center; 
    display:inline-block; 
    padding-bottom:13px; 
    padding-top:12px; 
    border-left: 1px solid #fff; 
    border-right: 1px solid #fff; 
} 

.nav a:hover { 
    background:#A26A42; 
    border:none; 
    width:32% 
} 

ul.nav li:first-child a{ 
    border:none; 
} 
ul.nav li:last-child a { 
    border:none; 
}

CSS

<ul class="nav"> 
     <li><a href="#">Search</a></li> 
     <li><a href="#">Legend</a></li> 
     <li><a href="#">Info</a></li> 
</ul> 
<div id="map_canvas" style="position:absolute;left:0;right:0;"></div>

末感謝您的任何幫助。

來源

2012-11-13 Andrew

我返工你的CSS這樣jsFiddle example。

CSS

ul.nav { 
    width:100%; 
    margin:0 auto; 
    padding:0; 
    list-style:none; 
    background-color:#62564A; 
    text-align:center; 
    font-family: sans-serif; 
} 
.nav li { 
    display:inline-block; 
    width:33%; 
    margin:0; 
    padding:0; 
} 
.nav a { 
    text-align:center; 
    padding:12px 0 13px 0; 
    margin:0; 
    border-left: 1px solid #fff; 
    border-right: 1px solid #fff; 
    display:block; 
} 
.nav a:hover { 
    background:#A26A42; 
    border:none; 
} 

ul.nav li:first-child a{ 
    border:none; 
} 
ul.nav li:last-child a { 
    border:none; 
}

來源

2012-11-13 21:35:10 j08691

嗨，感謝這工作。我沒有意識到我需要把列表項上一行像這樣：

Legend

Info

當我試圖把每一個單獨的行上的「信息」雲上的第二行中使用jfiddle – Andrew

這是消除任何可能導致神祕空白的空白空間的技巧。 – j08691

謝謝。點擊時，是否有突出顯示每個導航路段的開/關的方法？如果您點擊一次（背景更改），懸停工作正常，但是當您再次點擊它時，懸停不會恢復到原始背景。再次感謝。 – Andrew

試試這個：

* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already) 

.nav li { 
    display:block; 
    float:left; 
    width: 33%; 
} 
.nav li a { 
    display:block; 
    text-align: center; 
}

小提琴：http://jsfiddle.net/kboucher/duaa6/

來源

2012-11-13 21:34:40

謝謝這個工作。但是現在我在導航欄和我的下一個div（這是一個地圖畫布）之間有一個小空白區域。有沒有辦法擺脫這個？ – Andrew

@Andrew不知道沒有看到代碼的其餘部分，但我更新了我的小提琴包括後續的div（沒有空間）http://jsfiddle.net/kboucher/duaa6/ –

在「懸停」你讓小於普通的菜單項。另外，您還可以移除更窄的邊界。此外，它看起來像你正在使用1px的邊界左右間距。如果這是使用保證金的情況。使用jsfiddle來練習。

試試這個：

ul.nav { 
     width:100%; 
     margin:0; 
     padding:0; 
     list-style:none; 
     text-align:center; 
     font-family: sans-serif; 
    } 

    .nav li { 
     display:inline; 
    } 

    .nav a { 
     width:32%; 
     text-align:center; 
     display:inline-block; 
     padding-bottom:13px; 
     padding-top:12px; 
     margin-left: 1px; 
     background: #62564A;    
    } 

    .nav a:hover { 
     background:#A26A42; 
    } 

    ul.nav li:first-child a{ 
     margin-left: 0; 
    }

http://jsfiddle.net/mVv75/4/

來源

2012-11-13 21:45:09 jamalali81

導航欄整個寬度間隔的項目均勻

回答

相關問題