javascript - fa 图标将元素推开

Question

我正在尝试创建带有一些选项卡的导航菜单。但是，带有“fa 图标”的选项卡下方的选项卡有点占用太多空间，并且其他元素向右或下方移动(如果有第三行)。

我怎样才能避免这种插入？

看起来像这样:

http://jsfiddle.net/63peh71b/1/

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

Answer 1

试试这个:

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 值。