为什么浮动按钮不能保持其位置？

Question

在片段中你可以看到，如果我想要过去浮动的按钮/组，他们不能保持相对段的位置。我的布局怎么了？ 代码清单你可以看到https://codepen.io/saveurmind/pen/oWXWOa 在段中放置标题的内容，我使用原始的全尺寸列（16）。 如果我使用的按钮没有＆＃34;右浮动＆＃34; - 一切都好。

<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在父块中包含您的子元素。

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

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

1. 将h3改为span（cus h1~h6将占据整行）

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

1. 如果你想保留h3，那么你需要添加一个名为
的新类

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

.inlineblock{
  display:inline-block;
}

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

What is a clearfix?