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
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: ":"
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With