html - 表格下的按钮对齐在 CSS 中不起作用

Question

我有这段 html 代码，我在容器内的 div 中有一个表。

<div class="col-sm-12">
    <table class="table table-responsive table-bordered" id="calctable">
    ....
    </table>
    <button class="btn btn-suceess"></button>
</div>    

我想把按钮直接移到表格的右下角类似于this .

我尝试了多种方法来获得我想要的东西，但它们都无法正常工作。我尝试使用 float-right 类将按钮向右浮动。我尝试使用 col-sm-offset-11。也没用。有什么办法可以解决这个问题吗？

Answer 1

有几种方法可以实现你想要的，下面的两个例子使用了一个包装你的 table 和 button 元素:

.col-sm-12 {
  background-color: red;
  width: 300px;
  padding: 10px;
  margin-bottom: 10px;
}

.wrapper { width: 80%; }

table {
  background-color: yellow;
  height: 20px;
  margin-bottom: 10px;
  width: 100%;
}


/* With flexbox (don't forget to add vendor prefixes) */

#test-flex .wrapper {
  display: flex;
  flex-direction: column;
}

#test-flex button { align-self: flex-end; }

/* With float */

#test-float button { float: right; }
.clear { clear: both; }

<!-- With flexbox -->

<div id="test-flex" class="col-sm-12">

    <div class="wrapper">
      <table></table>
      <button>Button</button>
    </div>
    
</div>

<!-- With float -->

<div id="test-float" class="col-sm-12">

    <div class="wrapper">
      <table></table>
      <button>Button</button>
    </div>
    
    <div class="clear"></div>
</div>