背景侧翻垂直分隔

我有一个内置的方式导航：背景侧翻垂直分隔

<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

背景侧翻垂直分隔

回答

相关问题