Question

我有桌子，我在右侧按钮上面在左侧有一些文字。（它们是平行的）目前它非常接近下面的表，我想移动文字和按钮有点小，我该怎么做？

<h4 style="display:inline">Users Table</h4>
<div style="float:right" class="text-right">

    <a href="#" id="addRow"><i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;New</a>

</div>

//Here start the table

@* List of users *@
<table class="table table-striped  ">

如果我使用<br />它会移动很多，有一种方法可以按像素进行操作吗？

Answer 1

只需在文本和按钮周围创建一个div，然后在其中应用一些margin-bottom。

<div style="margin-bottom: 20px">
    <h4 style="display:inline">Users Table</h4>
    <div style="float:right" class="text-right">

        <a href="#" id="addRow"><i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;New</a>

    </div>
</div>

//Here start the table

@* List of users *@
<table class="table table-striped  ">

Answer 2

由于你正在使用Bootstrap，你可以做一个简单的grid来完成它。

<div class="row">
  <div class="col-md-6>
    <h4>Users Table</h4>
  </div>
  <div class="col-md-6>
    <a href="#" id="addRow"><i class="glyphicon glyphicon-plus"></i> New</a>
  </div>
</div>

<!-- table -->

我不知道.text-right做了什么，但可能会应用于按钮。

Answer 3

是的，使用CSS你可以像这样添加填充：

          style="padding-top:0.5px;"

或者

           style="padding-bottom:0.5px;"

Answer 4

在你的css中执行此操作：

table.table { clear:both; margin-top:10px;}

更改按钮和文本相对于表的位置

4 个答案: