语义UI浮动 [英] Semantic UI floats

问题描述

这里是语义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-leftfor 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 segments 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浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！