Semantic-UI 세그먼트의 엘레멘트 오른쪽으로 플로트

Question

시맨틱 UI의 세그먼트에 문제가 있습니다. 나는 세그먼트 클래스를 넣고 내부에 요소의 동적 목록을 가지고 있으며 일부 데이터와 일부 아이콘을 표시합니다. 내 문제는 제목 뒤에 아이콘을 오른쪽으로 밀어 넣을 수 없다는 것입니다. 나는 아무것도 나는 모든 아이콘을 밀어 싶습니다 ... 작동하지 .floated.right 시도하고 .aligned.right하지만

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

(그들은 같은 줄에 체류하는 기간이다) 그것을 오른쪽으로 붙이십시오. 도움

Answer 1

에 대한

덕분에 당신이 당신의 구조를 편집 할 경우, 다음과 같은 접근 시도 : 당신이 텍스트에서 떨어져 다른 요소를 포장하는 경우 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> 

:

JS 바이올린을 별도의 스팬을 사용하면 문제가 단순히 div 안에 두 스팬을 정렬하여 한 플로트가 왼쪽으로 떠 밀려 나오게되고 다른 플로트는 오른쪽 플로트가됩니다. 다음 CSS와

:

.text { 
    float: left; 
} 

.others { 
    float: right; 
} 

.block:after { 
    content: ":" 
}