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

Question

我正在使用Semantic UI React。我有一个Segment组件，其中包含一些内容，以我想要向右浮动的Button结束，但是当我向右浮动它时，它开始从段中出来：

如果我不漂浮它，它会很好地留在Segment内部，但是它在左边，我希望它在右边：

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

Answer 1

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

Answer 2

您可以简单地在clearing上设置Segment，而无需手动调整CSS规则，而the documentation确认后，它将清除浮动内容。

在引擎盖下，当前似乎应用了clearfix的变体：

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

Answer 3

你需要使用像

这样的东西

button{
float:right;
position:inherit;
}

Answer 4

我正在研究一本Angular的书，发现他们在标准styles.css中添加了此CSS，以使该按钮位于细分中：

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

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