我有一个导航堆叠列表,其中包含如下所示的检查。有什么方法可以将支票移动到元素的右侧或左侧,以便当元素处于事件状态时它们不会遮盖支票?
这是我的 fiddle
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home <i class="glyphicon glyphicon-ok pull-right"></i></a>
</li>
<li role="presentation"><a href="#">Profile <i class="glyphicon glyphicon-ok pull-right"></i></a>
</li>
<li role="presentation"><a href="#">Messages <i class="glyphicon glyphicon-ok pull-right"></i></a>
</li>
</ul>
最佳答案
稍微更改标记,将其移到 anchor 之外。
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">
<a href="#">Home</a>
<i class="glyphicon glyphicon-ok pull-right"></i>
</li>
<li role="presentation">
<a href="#">Other</a>
<i class="glyphicon glyphicon-ok pull-right"></i>
</li>
</ul>
.nav .active {
overflow: hidden;
}
.nav .active a {
width: 80%;
float: left;
}
.nav i {display:none;}
.nav .active i {
margin: 12px 14px 0 0;
display: block;
}
编辑:Fiddle
关于html - 在导航堆叠元素旁边放置字形图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41111303/