Question

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

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

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

1 个答案: