fa圖標將元素推走

我正嘗試用某些選項卡創建導航菜單。但是，帶有「fa圖標」的選項卡下的選項卡佔用太多空間，其他元素則移至右側或下側（如果出現第三條線）。fa圖標將元素推走

我該如何避免這種推動？

它看起來像這樣：

.slider { 
 
    position: fixed; 
 
    top: 168px; 
 
    background-color: white; 
 
    left: 48px; 
 
    right: 48px; 
 
    z-index: 3; 
 
    padding-top: 6px; 
 
} 
 

 
.nav-tabs { 
 
    border-bottom: 1px solid #c4c4c4; 
 
} 
 

 
.nav { 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
    list-style: none; 
 
} 
 

 
ol, ul { 
 
    margin-top: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
ul, menu, dir { 
 
    display: block; 
 
    list-style-type: disc; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    -webkit-padding-start: 40px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<ul class="nav nav-tabs slider"> 
 
<li id="id1" class=""><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab1</a></li> 
 
<li id="id2"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab2</a></li> 
 
<li id="id3"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab 3</a></li> 
 
<li id="id4"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab 4</a></li> 
 
<li id="id5"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab 5</a></li> 
 
<li id="id6"><a href="javascript:;">Tab 6</a></li> 
 
<li id="id7"><a href="javascript:;">Tab 7</a></li> 
 
<li id="id8"><a href="javascript:;">Tab 8</a></li> 
 
<li id="id9"><a href="javascript:;">adsadsadsad Tab 9</a></li> 
 
<li id="id10" class="active"><a href="javascript:;">Tab 10</a></li> 
 
<li id="id11"><a href="javascript:;">Tab 11</a></li> 
 
<li id="id12"><a href="javascript:;">Tab 12</a></li> 
 
<li id="id13"><a href="javascript:;">Tab 13</a></li> 
 
<li id="id14"><a href="javascript:;">Tab14</a></li> 
 
</ul>

來源

2017-07-25 Sammy

你可以在你的代碼片段中包含相關的外部鏈接嗎？目前還不清楚你發佈的內容是什麼，謝謝 – sol

@ovokuro我編輯了問題 – Sammy

如果有這麼多的標籤，那很明顯，將標籤推到下一行.'fa'不會將標籤推到下一個標籤行，那麼結束時沒有空間，那麼它會自動推到下一行。 –

試試這個：

header{ 
position:relative; 
} 
#yourNavIconsTab { 
li { 
    list-style: none; 
    display: inline-block; 
    padding:3px; 
    float:right; 
    color:@brand-primary; 
    position:absolute; 
    right:0px; 
    top:0px; 
    } 
}

您可能需要調整top和right值。

來源

2017-07-25 11:29:57

fa圖標將元素推走

回答

相關問題