fa图标推开元素

Question

我正在尝试使用一些标签创建导航菜单。但是，带有“fa icons”的选项卡下的选项卡有点占用太多空间而其他元素则向右或向下移动（如果有第三行）。

我怎样才能避免这种推动？

看起来像这样：

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