導航欄用不同的字體大小元素

擁有全屏幕響應寬度和按鍵寬度在％定製。
包含上的按鈕不同的字體大小的文本
錨文本必須它
所有按鍵面積都必須可以點擊裏面的中心位置，強調懸停

我已經做了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

來源

2016-02-21 Karabas Barabas

試試這個：

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

來源

2016-02-21 02:08:35

display：block; line-height：60px;爲是關鍵。是不必要的。 \t 謝謝你！ –

不用擔心！我添加了span以保留原始功能，只有文字在懸停時加下劃線。 –

導航欄用不同的字體大小元素

回答

相關問題