1
我是新来的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
display:block; line-height:60px;为是关键。 是不必要的。 \t 谢谢你! –
不用担心!我添加了span以保留原始功能,只有文字在悬停时加下划线。 –