Question

我有一个以某种方式构建的导航：

<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>的宽度不同。
，尽管我很好，它仍会更改<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;}

Answer 1

在“内联”元素中

a，给定为display:block，因此可以应用宽度，边距，填充等。

Answer 2

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

Answer 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/

在水平的航海的背景翻转与垂直的分切器

3 个答案: