Semantic-UI 在 Segment 中元素的右侧浮动

Question

我对语义 UI 中的 Segments 有问题。我有一个动态元素列表，我在其中放置了一个段类，并在其中显示了一些数据和一些图标。我的问题是我无法将图标推到标题后的右侧。（他们是跨度保持在同一行）

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