段中元素的语义-UI向右浮动
段中元素的语义-UI向右浮动
提问于 2016-09-26 22:56:57
我对语义UI中的片段有一个问题。我有一个元素的动态列表，其中我放了一个segment类，在里面，我显示了一些数据和一些图标。我的问题是我不能把图标推到标题后面的右边。(它们被跨越以保持在同一行中)
.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，但都不起作用。我想把所有的图标都推到右边。
谢谢你的帮助
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-27 02:50:36
如果可以编辑结构，请尝试以下方法：
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>如果您将除文本之外的其他元素包装在一个单独的span中，那么问题就变成了在div中对齐两个span，这样一个向左浮动，另一个向右浮动。
使用以下CSS：
.text {
float: left;
}
.others {
float: right;
}
.block:after {
content: ":"
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39706081
复制相关文章
相似问题
腾讯云开发者
