语义 UI React - 浮动按钮从容器中出来？

Question

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

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

我该怎么做才能解决这个问题？

Answer 1

你需要使用一些像

button{
float:right;
position:inherit;
}

Answer 2

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

Answer 3

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

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

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

Answer 4

无需手动调整 CSS 规则，您只需在 Segment 上设置 clearing，正如 the documentation 确认的那样，清除浮动内容。

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

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

Answer 5

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

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

Semantic UI React - floated button coming out of its container?