Segment中的語義UI浮動權限

我在Semantic UI中的Segments存在問題。我有一個動態的元素列表，我在其中放置了一個段類，並且顯示了一些數據和一些圖標。我的問題是我無法在標題之後將圖標推到右側。（它們跨度留在同一行）Segment中的語義UI浮動權限

.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，但沒有什麼工作...... 我願推動所有的圖標並將其粘在右側。

感謝您的幫助

來源

2016-09-26 guillaumek

如果你可以編輯你的結構，試試下面的辦法：

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: ":" 
}

來源

2016-09-26 18:50:35 Sarthak

Thnaks，是的，我有這個想法，但我卻認爲有更多的「語義的方式」之類語義類「floated.right」這樣的東西:)但由於順便解釋 – guillaumek

按鈕可以使用語義正確地浮動。您可以類似地修改按鈕的跨度，並使用語義「ui右浮動按鈕」類。不知道一個適用於其他元素的類。 – Sarthak

Okey，是的，我嘗試了另一件事情，這是真的，它與按鈕的作品。感謝精確度。 – guillaumek

Segment中的語義UI浮動權限

回答

相關問題