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;
}

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

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项目提供了一些填充权限，以容纳剪贴板图标。

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

下拉列表也会使宽度等于文字的最大宽度。