问题描述
这里是语义UI的新手,我在文档的任何地方都找不到(如果可能的话)如何在没有其他元素(例如按钮或段)的情况下浮动一个简单元素.
Semantic UI newbie here, I couldn't find anywhere in the docs how (if it's possible) to float a simple element without having it to be something else (like a button or a segment).
例如,我在页面底部有一个步骤导航/计数器,其编写方式如下:
For instance, I have at the bottom of a page a step navigation/counter that is written like so:
<div class="row three column">
<div class="column">
<br>
<p class="ui left floated compact basic segment stepper">Step 2 of 3</p>
<a class="ui right floated compact basic segment stepper">Go back</a>
</div>
</div>
除了必须在浮动元素之前放置<br>
的事实对我来说有点怪异之外,这不是'是否可以仅添加left floated
之类的类并让它发疯呢?就像我们要使用pull-left
引导程序…
Beside the fact that having to place a <br>
before the floating elements looks kinda weird to me, isn't it possible to just add classes like left floated
and have the thing foat? Like we'd with bootstrap with pull-left
for instance…
如果我理解得很清楚,该段用于对相关内容进行分组(语义上对应于HTML5 <section>
标签).因此,在这种情况下使用segment
似乎有点过大,即使不是从语义上来说也是错误的.
If I understand well, segment is for grouping related contents (corresponding semantically to the HTML5 <section>
tag). Therefore, it seems a bit overkill – if not semantically wrong – to use segment
s in such situations.
推荐答案
当前,引导程序中没有像pull-left
这样的全局实用程序.例如,每当在SUI代码中定义right float
时,它始终与按钮,句段,列表等元素相关联.
Currently there are no global utilities like pull-left
in bootstrap. Whenever right float
, for example, is defined in the SUI code, it is always in association with an element such as button, segment, list, etc.
您可以简单地定义自己的全局实用程序,而无需对任何SUI元素进行过度杀伤":
You can simply define your own global utility, without need to "overkill" with any SUI elements:
div [class*="left floated"] {
float: left;
margin-left: 0.25em;
}
div [class*="right floated"] {
float: right;
margin-right: 0.25em;
}
尽管根据您的情况,图标按钮在语义上可能同时适用于这两个元素.
Though for your situation, an icon button might be semantically suited for both the elements.
这篇关于语义UI浮动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!