Semantic UI React - 从容器中出来的浮动按钮？答案

【问题标题】：Semantic UI React - floated button coming out of its container?Semantic UI React - 从容器中出来的浮动按钮？
【发布时间】：2017-09-28 19:52:13
【问题描述】：

我正在使用语义 UI React。我有一个 Segment 组件，里面有一些东西，以一个我想向右浮动的 Button 结尾，但是当我向右浮动它时，它开始从 Segment 中出来：

如果我不浮动它，它会很好地留在 Segment 内，但它在左侧，我希望它在右侧：

我能做些什么来解决这个问题？

【问题讨论】：

【解决方案1】：

您可以简单地在Segment 上设置clearing，而不是手动调整CSS 规则，正如the documentation 所确认的那样，它会清除浮动内容。

在后台，它目前似乎应用了 clearfix 的一个变体：

.ui.clearing.segment::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

【讨论】：

【解决方案2】：

尝试使用margin-left:auto，而不是float。这将在其容器右侧对齐块级元素。

【讨论】：

这行得通，但只有在我还添加了display: inherit 之后。显然，语义 UI 框架将 .ui.button 类添加到 Button 组件，这些类被设置为 display: inline-block，这显然忽略了 margin-left: auto 设置。

【解决方案3】：

你需要使用一些类似的东西

button{
float:right;
position:inherit;
}

【讨论】：

【解决方案4】：

我正在研究一本 Angular 书，看到他们在标准 styles.css 中添加了这个 css 以获取片段内的按钮：

form.form:after {
   content: '';
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

这有助于我获取表单内的按钮并使用正确的浮动类。

【讨论】：

【解决方案5】：

有一个解决方案只使用语义而不是自定义 CSS。只需将按钮放在另一个容器中并在容器上设置对齐方式：

 <div class="ui right aligned container">
     <button class="ui button" type="submit">Add All</button>
 </div>

【讨论】：