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

发布于 2024-12-18 14:46:21 字数 1253 浏览 0 评论 0原文

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

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

并且每个项目的右侧都有一个小边框。边框并没有从上到下一直延伸，因此我将其放在标记上，而不是

现在，在 ' selected' 导航状态我希望

的背景更改为不同的颜色，但我遇到了 2 个问题：

我的 < li> 和我的宽度不同。
在 Chrome 中，它改变了中的背景，尽管我很好意图。

这是我的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;}

原文

I have a navigation that is built in a way:

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

and I have a small border on the right of each of the items. The border is not going all the way from top to bottom, so I have put it on the <a> tag instead of <li>

Now, in the 'selected' state of my navigation I want the <li>'s background to change to a different color, but I run into 2 problems:

my <li> and my <a> are not the same width.
in Chrome, it changes the background in <a> despite my good
intentions.

Here's my css. I would appreciate if someone knows how to do this, has been fighting for days...

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

口干舌燥 2024-12-25 14:46:21

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

回复收藏 0 原文

傲世九天 2024-12-25 14:46:21

使用 block 或 inline-block 来显示元素。

回复收藏 0 原文

初懵 2024-12-25 14:46:21

最好的办法是实际上避免为

元素设置任何尺寸，而是应用标记中的所有尺寸。这样，导航元素的整个部分将是可点击的，并且将在悬停时发生变化。

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/

Your best bet is to actually refrain from setting any dimensions for your <li> elements, and instead apply all of those within your <a> tag. That way, the entire part of the navigation element will be clickable, and will change on hover.

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

Preview: http://jsfiddle.net/Wexcode/NR9az/

回复收藏 0 原文

~没有更多了~