我正在使用引導 3.3.6
我有以下導航標簽。
<div class="my-panel">
<ul class="nav nav-tabs">
<li id="343_tab" class="active">
<a href="javascript:">[Edit]</a>
<a href="javascript:">Tab1</a>
</li>
</ul>
</div>
看起來像這樣
我希望它看起來像這樣：
當我將 li 更改為 inline-flex 時，它看起來像兩個單獨的選項卡。對任何其他顯示選項沒有影響。
uj5u.com熱心網友回復：
您需要將元素包裝在<a>元素內<li>。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="my-panel">
<ul class="nav nav-tabs">
<li class="active"><a href="javascript:">[Edit]</a></li>
<li><a href="javascript:">Tab1</a></li>
</ul>
</div>uj5u.com熱心網友回復：
嘗試
.nav-tabs {
border: 1px solid #ddd;
border-bottom: none !important;
border-radius: 4px;
border-bottom-right-radius: 0px;
display: inline-block;
}
.nav-tabs a {
border: none !important;
margin-right: 0 !important;
text-decoration: underline;
font-weight: 500;
text-decoration-thickness: 2px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="my-panel">
<ul class="nav nav-tabs">
<li class="active"><a href="javascript:">[Edit]</a></li>
<li><a href="#">Tab1</a></li>
</ul>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418311.html
標籤：
上一篇：css的鏈接不與html連接