html - 在导航堆叠元素旁边放置字形图标

Question

我有一个导航堆叠列表，其中包含如下所示的检查。有什么方法可以将支票移动到元素的右侧或左侧，以便当元素处于事件状态时它们不会遮盖支票？

这是我的 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>

Answer 1

稍微更改标记，将其移到 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