为什么浮动按钮不能保持它们的位置？

Question

在片段中你可以看到，如果我想过去浮动 button/group 他们无法保持相对段中的位置。我的布局有什么问题？代码清单你可以看到https://codepen.io/saveurmind/pen/oWXWOa header 的内容放在段中，我在原始中使用全尺寸 column(16)。如果我使用没有 "right floated" 的按钮 - 一切正常。

<div class="row">
   <div class="sixteen wide column"> 
    <div class="header-bar">
    <div class="ui segment">
     <div class="header-content">
      <h3 class="ui header">Title</h3>
      <div class="ui right floated basic buttons">
       <div class="ui button">One</div>
       <div class="ui button">Two</div>
       <div class="ui button">Three</div>
      </div>
     </div>
    </div>
    </div>
   </div>
  </div>

Answer 1

您可以使用 clearfix 将 child 元素包含在 parent 块中。

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

如果您想要标题与 btn 相同的行，有两种方法：

将 h3 改为 span（cus h1~h6 将占用整行）

https://codepen.io/hdl881127/pen/bWdRVp

如果要保留 h3，则需要添加一个名为

https://codepen.io/hdl881127/pen/BRNZLj

.inlineblock{
  display:inline-block;
}

您可以在此处阅读有关 clearfix 的更多信息：

What is a clearfix?

为什么浮动按钮不能保持它们的位置？

Why floated buttons cant keep their position?

html

css

semantic-ui