html - 我该怎么做CSS CSS

标签 html css

我如何做一个看起来像这样的CSS Border-bottom?


您可以在以下互联网上查看它:http://themes.laborator.co/neon/frontend/main/

这就是我到目前为止



但我希望它看起来完全像他们是怎么做的!请告知,这是到目前为止我所使用的CSS。

.active {
color: #ff4e50;
border-bottom: 5px solid #ff4e50;

}


我要特别问的是如何使它们像他们一样紧密地触摸,并对其进行更改以使其与文本一样宽。我尝试检查元素,但找不到

==
我所有的当前代码:实时预览+实时编辑:http://jsfiddle.net/FLq5c/3/

HTML:
    
      
        
          示例公司
          
            
            
            
          
        
        

     <ul class="nav navbar-nav navbar-right">

      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>

      </ul>

    </div>
  </div>
</div>


的CSS

.customnav {
vertical-align: middle;
padding-top: 40px;
padding-bottom: 40px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 13px;
line-height:20px;

}

.customnav li {
color: blue;

}

.header {

font-size: 28px;

}

.active {
color: #ff4e50;
border-bottom: 3px solid #ff4e50;
line-height: 20px;



}

.active a, .active a:hover {
color: #ff4e50;
}

最佳答案

您将要设置线条的高度或高度:

.active {
    line-height: 20px;
    height: 20px;
    font-size: 16px;
    color: #ff4e50;
    border-bottom: 5px solid #ff4e50;
}


我已经用您的html和css jsfiddle here更新了演示

关于html - 我该怎么做CSS CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22122003/

相关文章:

css - 旋转齿轮动画在 Firefox 中不起作用

html - SVG 宽度超过 div

html - 将文本居中到页面而不是单元格

java - 我想用jsp将随机数据添加到HTML表中

javascript - 来自数组 HTML Javascript 的图像

html - 可以使用 CSS 交换 div 元素的位置吗?

jquery - 如何检测是否已取消选择导航按钮?

html - DIV 内容超出父级宽度

html - CSS-页脚显示在错误的位置

html - 无法悬停时无法获取li链接为正确的颜色