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>    

我想直接在表格右下角移动按钮，类似于此。

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

标签： htmlcsstwitter-bootstrap

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>