Semantic-UI Float right of elem в сегменте

Question

У меня проблема с сегментами в семантическом интерфейсе. У меня есть динамический список элементов, где я помещаю класс сегмента и внутри, я показываю некоторые данные и некоторые значки. Моя проблема в том, что я не могу нажать значки справа после названия. (Они пядь оставаться в одной и той же линии)

.ui.segments.piled 
     if currentUser 
     .ui.segment 
      form.new-list.ui.transparent.icon.input.fluid 
       i.icon.edit 
       input(type="text" name="text" placeholder="Add List") 
     each lists 
     .ui.segment.listitem.list-selected 
      span.text #{text} 
      if isOwner 
      span#editlist 
       i.fa.fa-edit 
      span 
       i.icon.delete.ui.red 
      span.toggle-list-private 
       if private 
        i.fa.fa-lock.private-lock 
       else 
        i.fa.fa-unlock.public-lock 
     .ui.teal.label 
      span {{incompleteCount this._id}} 

Я попытался .floated.right и .aligned.right, но ничего не работает ... Я хотел бы, чтобы подтолкнуть все иконки и вставьте его в правую сторону.

Спасибо за помощь

Answer 1

Если вы можете редактировать структуру, попробуйте следующий подход:

JS скрипку: https://jsfiddle.net/batrasoe/51o0hv12/

<div class="ui segment listitem block"> 
    <span class="text"> Text</span> 
    <span class="others"> 
     <span class="editList"> 
      <i class="ui edit icon"></i> 
     </span> 
     <span> 
      <i class="right icon delete ui red"></i>  
     </span> 
     <span class="toggle-list-private"> 
      <i class="ui lock icon"></i> 
     </span> 
     <span class="ui teal label"></span> 
    </span> 
</div> 

Если вы обернуть другие элементы, кроме текста в отдельный промежуток, проблема просто сводится к выравниванию двух пролетов внутри div, поэтому один плавает влево, а другой плавает вправо.

Со следующим CSS:

.text { 
    float: left; 
} 

.others { 
    float: right; 
} 

.block:after { 
    content: ":" 
}