添加彩条导航栏css

【问题标题】：Add colored bar navigation bar css添加彩条导航栏css
【发布时间】：2014-01-14 20:00:16
【问题描述】：

我的导航菜单下方需要一个彩色条，但我不知道如何以正确的方式执行此操作。

我需要什么：

编辑：我忘了问如何将导航菜单放置在徽标高度的 50% 处。我使用了 20px 的“静态”边距顶部，但这是一个好方法吗？ i.imgur.com/ApihCfJ.png

HTML

<div id="menu">  
    <ul>  
        <li><a href="/home/" title="Home">Home</a></li>  
        <li><a href="/over-ons/" title="Over ons">Over ons</a></li>  
        <li><a href="/producten/" title="Producten">Producten</a></li>  
        <li><a href="/contact/" title="Contact">Contact</a></li>  
    </ul>  
</div>

CSS

#menu  {
    margin-top:40px;
}
#menu ul {
    list-style-type: none;
}
#menu ul li {
    display: inline;
}

【问题讨论】：

标签： html css navigation

【解决方案1】：

这里有工作演示：http://jsbin.com/olAXoSi/2/

li {
  display: inline-block;
  width: 150px;
  border-bottom-style: solid;
  border-bottom-width: 4px;
  margin: -5px ;
  padding: 0 15px 0 0 ;
}

.item-1 {
  border-bottom-color: red;
}
.item-2 {
  border-bottom-color: yellow;
}
.item-3 {
  border-bottom-color: green;
}
.item-4 {
  border-bottom-color: blue;
}

【讨论】：

嗯，今天的 jsBin 有点慢，但是 +1 的努力和干净的代码

【解决方案2】：

fiddle

CSS

 #menu  {
margin-top:40px;
}

#menu ul {
    list-style-type: none;
}
#menu ul li
{
    display: inline;
}
#menu ul li a {

text-decoration:none;    
    color:#666;

}

#first
{
    border-bottom:2px solid blue;

}

#second
{
    border-bottom:2px solid red;
}

#third
{
    border-bottom:2px solid green;
}

#fourth
{
    border-bottom:2px solid yellow;
}

【讨论】：

这只会在每个项目下创建一条红线。我会保留他的代码不变，并为每个菜单项添加一个 ID，以便他可以单独自定义底部栏的颜色。
对于每个
使用 padding-right 来使颜色彼此相邻是否是一种好方法，因为颜色距离
的最后一个字符 20 像素

@user3104933 也许是保证金？真的没关系。

哦，是的，你是对的！ :) 谢谢大家的快速/有用的回复！

@user3104933 不，不要为li 元素使用填充，在创建LI 作为菜单持有者时，为A 元素分配填充和样式。您将获得更好的编写代码和更广泛的可点击区域。将 LI 元素视为虚拟容器。

【解决方案3】：

我建议使用:nth-child() 选择器来实现这种效果。

以下是 HTML 的外观：（ 删除内联空格）

<div id="menu">
    <ul>
        <li><a href="/home/" title="Home">Home</a>
        </li><!--
        --><li><a href="/over-ons/" title="Over ons">Over ons</a>
        </li><!--
        --><li><a href="/producten/" title="Producten">Producten</a>
        </li><!--
        --><li><a href="/contact/" title="Contact">Contact</a></li>
    </ul>
</div>

CSS：

#menu ul li:nth-child(1) {
    border-bottom: 2px solid teal;
}

#menu ul li:nth-child(2) {
    border-bottom: 2px solid brown;
}

#menu ul li:nth-child(3) {
    border-bottom: 2px solid lime;
}

#menu ul li:nth-child(4) {
    border-bottom: 2px solid yellow;
}

最后，这是Demo。

我还对您的 CSS 进行了这些更改以更改外观：

#menu ul li {
    display: inline-block;
}

#menu ul li a {
    display: block;
    text-decoration: none;
    font-size: 22px;
    color: #2b2b2b;
    padding-right: 20px;
}

【讨论】：