Элемент выпадающего 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 Invoice 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 отступы справа отразместите значок буфера обмена.

Это гарантирует, что значок всегда будет оставаться справа, даже если текст длинный.

Кроме того, в раскрывающемся списке будет принята ширина, равнаямаксимальная ширина текста.