Semantic-UI Float right of an elem in Segment

Question

I have a problem with the Segments in Semantic UI. I have a dynamic list of elements where I put a segment class and inside, I display some data and some icons. My problem is I can't push the icons to the right after the title. (they are span to stay in the same line)

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

I tried .floated.right and .aligned.right but nothing is working ... I would like to push all the icons and stick it to the right side.

Thanks for the help

Answer 1

If you can edit your structure, try the following approach:

JS Fiddle: 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>

If you wrap your other elements apart from text in a separate span, the problem simply becomes to align two spans inside a div so one floats left, and the other floats right.

With the following CSS:

.text {
  float: left;
}

.others { 
  float: right;
}

.block:after {
  content: ":"
}