背景側翻垂直分隔

我有一個內置的方式導航：背景側翻垂直分隔

<ul class='mainnav'> 
<li><a href="#"> Link 1 </a></li> 
<li><a href="#"> Link 2 </a></li> 
<li><a href="#"> Link 3 </a></li> 
</ul>

，我有一個小的邊界上每個項目的權利。邊框是不會一路從上到下，所以我把它放在<a>標籤，而不是<li>

現在，在我的導航「selected」狀態我想<li>的背景更改爲不同的顏色，但我遇到兩個問題：

我<li>和我<a>是不一樣的寬度。
在Chrome中，它改變了<a>的背景，儘管我的意圖很好。

這是我的CSS。如果有人知道如何做到這一點，一直爭取天，我將不勝感激......

#navigation{background-color:#294964; width:100%; height:40px; display:block;} 
#navigation ul.mainnav{height:35px; display:block; margin:0; } 
#navigation ul.mainnav li{display:inline; cursor: pointer; height: 40px; line-height:40px;margin:0px; padding:12px 0;} 
#navigation ul.mainnav li a{ border-right: 1px solid #49647B; color: #FFFFFF; padding:  4px 15px; text-decoration: none; width:100%; font-size: 14px; } 
#navigation ul.mainnav li a:hover{ color: #a4a47e;} 
#navigation ul.mainnav li.selected {background-color:#0b1b32;}

來源

2011-11-27 user1068027

使用塊或內聯塊爲元素的顯示。

來源

2011-11-27 16:28:18

a in「inline」element，give is display:block所以可以應用寬度，邊距，填充等。

來源

2011-11-27 16:28:31 3zzy

最好的辦法是實際避免爲您的<li>元素設置任何尺寸，而是將所有這些尺寸應用到您的<a>標籤中。這樣，導航元素的整個部分都將是可點擊的，並且會在懸停時更改。

HTML：

<ul class='mainnav'> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li class="selected"><a href="#">Link 3</a></li> 
</ul>

CSS：

.mainnav { 
    background-color: #294964; 
    font-size: 14px; 
    width: 100%; 
    height: 40px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: block; } 
.mainnav li { 
    float: left; 
    margin: 0; } 
.mainnav li a { 
    color: #fff; 
    text-decoration: none; 
    height: 29px; /* 40 - 11 */ 
    padding: 11px 15px 0; 
    border-left: 1px solid #49647B; 
    display: block; } 
.mainnav li:first-child a { border-left: 0; } 
.mainnav li a:hover, .mainnav li.selected a { 
    background-color: #0b1b32; 
    color: #a4a47e; }

前瞻：http://jsfiddle.net/Wexcode/NR9az/

來源

2011-11-27 20:48:16 Wex

背景側翻垂直分隔

回答

相關問題