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>

Answer 2

千种方法之一：

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

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

2 个答案: