如何将按钮锚元素放在父级内部的最右侧

Question

我无法在父元素的右侧设置名为＆＃34;请参阅我＆＃34; 的锚标记。请注意，我不想硬编码CSS的任何值。我想使用标准的bootstrap类。

工作示例：

推荐我按钮呈现正常。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

非工作示例：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

问题 当我使用＆＃34; Pull-Right＆＃34; ？

时，为什么锚标记会超出父标记？

Answer 1

Clearfix是一种使用浮动元素的旧的过于复杂的方法。

您还需要在样式表中添加条目。

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

.panel-heading {
    overflow:auto;
    }

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

这也有效：

.panel-heading {
    overflow:hidden;
    }

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

Answer 2

您在panel-heading中添加了clearfix。

＆＃13;

＆＃13;

<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 clearfix">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>

＆＃13;

＆＃13;

＆＃13;