带有垂直分隔符的水平导航上的背景翻转答案

【问题标题】：Background rollover on a horizontal navigation with vertical dividers带有垂直分隔符的水平导航上的背景翻转
【发布时间】：2012-01-07 09:05:34
【问题描述】：

我有一个内置的导航：

<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;}

【问题讨论】：

标签： html css background navigation

【解决方案1】：

a 在“内联”元素中，给出的是display:block，因此可以应用宽度、边距、填充等。

【讨论】：

【解决方案2】：

使用块或内联块来显示元素。

【讨论】：

【解决方案3】：

最好的办法是实际上避免为<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/

【讨论】：