html - 如何将按钮 anchor 元素放置在父元素的最右边

Question

我无法在父元素的右侧设置名为 “Refer Me” 的 anchor 标签。请注意，我不想硬编码 CSS 的任何值。我想使用标准的 Bootstrap 类。

工作示例:

“推荐我”按钮呈现正常。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bs-example" style="right-padding:140px;" data-example-id="panel-without-body-with-table">
  <div class="panel panel-default">
    <div class="panel-heading">Panel heading<a href="#" class="btn btn-primary">Refer Me </a></div>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

无效示例:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bs-example" style="right-padding:140px;" data-example-id="panel-without-body-with-table">
  <div class="panel panel-default">
    <div class="panel-heading">Panel heading<a href="/Referral/Create" class="btn btn-primary pull-right">Refer Me </a></div>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

问题 为什么当我使用 "Pull-Right" 时 anchor 标记会脱离父级？

Answer 1

Clearfix 是一种处理 float 元素的过于复杂的旧方法。

您还需要为其添加条目到您的样式表。

但这是更现代和优雅的方法

.panel-heading {
    overflow:auto;
    }

这将强制浏览器计算适合 float 元素的高度。

这也有效:

.panel-heading {
    overflow:hidden;
    }

一些较旧的浏览器可能需要添加 width:100% 或 width:auto 才能工作，但我已经很长时间没有遇到过这种情况了。