具有不同字体大小元素的导航栏答案

【问题标题】：Navbar with different font-size elements具有不同字体大小元素的导航栏
【发布时间】：2016-02-21 01:59:00
【问题描述】：

我是 CSS 新手并制作导航栏：

具有全屏响应宽度，按钮宽度以 % 为单位自定义。
在按钮上包含各种字体大小的文本
锚文本必须居中
所有按钮区域在悬停时必须是可点击的并带有下划线

我已经使用表格完成了 1-3 次，但完全停留在 4 次。

感谢您为我提供一些解决方案！

我的html：

<nav class="navbar navbar-default  ">
  <div>
    <ul class="nav navbar-nav">
      <li><a href='#'>ONE</a></li>
      <li><a href='#'>TWO</a></li>
      <li><a  href='#'><i class="fa fa-cog"></i>THREE</a></li>
    </ul>
  </div>
</nav>

我的 CSS：

.navbar-default div {
    display:table;
    width: 100%;
}
.navbar-default ul {
    display:table-row;
}
.navbar-default ul li {
    display: table-cell;
    height:60px;
    text-align: center;
    vertical-align: middle;
    width:33%;
    border: solid 1px black;
}

.navbar-default ul li a {
    vertical-align: middle;

    border: solid 1px black;
    border-bottom: 3px solid black;
    text-decoration: none;
}
.navbar-default ul li:last-child a {
    font-size:38px; 
}
.navbar-default ul li a:hover,
.navbar-default ul li a:active {
    border-bottom: 3px solid #ffd460!important;
}

Jsfiddle 上的代码相同

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试这个：

.navbar-default div {
    display:table;
    width: 100%;
}
.navbar-default ul {
    display:table-row;
}
.navbar-default ul li {
    display: table-cell;
    height:60px;
    text-align: center;
    vertical-align: middle;
    width:33%;
    border: solid 1px black;
}

.navbar-default ul li a {
    vertical-align: middle;      
    border: solid 1px black;
    text-decoration: none;
    display: block;
    line-height: 60px;
    height: 60px;
}
.navbar-default ul li a span {
    border-bottom: 3px solid black;  
}
.navbar-default ul li:last-child a span {
    font-size: 38px; 
}
.navbar-default ul li a:hover span,
.navbar-default ul li a:active span {
    border-bottom: 3px solid #ffd460!important;
}

<body>
<nav class="navbar navbar-default  ">
  <div>
    <ul class="nav navbar-nav">
      <li><a href='#'><span>ONE</span></a></li>
      <li><a href='#'><span>TWO</span></a></li>
      <li><a  href='#'><span><i class="fa fa-cog"></i>THREE</span></a>
      </li>
    </ul>
  </div>
</nav>
</body>

【讨论】：

显示：块；行高：60px；是键。是不必要的。谢谢大佬！
别担心！我添加了跨度以在悬停时仅在文本下划线时保留原始功能。