css - Bootstrap 下拉元素，里面有两个元素

Question

这就是我们的下拉列表现在的样子:

我们希望它是这样的:

这是我们当前的代码:

<li>
  <a target="blank" class="pull-left dropdown-menu__split-li-left" href=""><i class="fa fa-link margin-right-5 text-muted"></i>
Public Invoice View</a>
  <a class="pull-right dropdown-menu__split-li-right" data-clipboard-text="" href="#" title="Click me to copy to your clipboard"></a>
  <div class="clearfix"></div>
</li>

我们使用的是 Bootstrap 3，这里是一些自定义 CSS:

.dropdown-menu__split-li-left {
  margin-right: 0;
  display: inline-block;
  clear: inherit;
}

.pull-left {
  float: left;
}

我们如何制作公共(public)发票 View 及其右侧的相关图标？

Answer 1

这是我的解决方案 JSFiddle

<li class="dropdown-item item">

            <a target="blank" class="" href="#">
            <i class=" fa fa-link icon"></i>
             Public Invoice View</a>
            <a class=" fa fa-clipboard clip" data-clipboard-text="" href="#" title="Click me to copy to your clipboard"></a>
</li>

---

.clip {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  text-align: center;
}

我制作了剪贴板图标 position:absolute 并为整个 li 元素提供了一些 padding-right 以容纳剪贴板图标。

这将确保即使文本很长，图标也始终保持在右侧。

此外，下拉菜单 的宽度将等于文本的最大宽度。