我对语义 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 但没有任何效果...... 我想把所有的图标都推到右边。
感谢帮助
最佳答案
如果您可以编辑结构,请尝试以下方法:
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>
如果您将其他元素与文本分开放在一个单独的 span 中,问题就变成了在 div 中对齐两个 span,这样一个向左浮动,另一个向右浮动。
使用以下 CSS:
.text {
float: left;
}
.others {
float: right;
}
.block:after {
content: ":"
}
关于html - Semantic-UI Float right of an elem in Segment,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39706081/