Question

我有2个按钮，我希望它们在同一行。

按钮一个在另一个下面，因为一个位于<a>元素内，一个位于form

内

这是代码

<a href="update/"><button class="btn btn-default">Update Contact</button></a>
<form action="" method="post">
{% csrf_token %}
    <button type="submit" class="btn btn-default">Delete Contact</button>
</form>

我怎样才能将它们放在同一行？

小提琴 - http://www.bootply.com/114827

Answer 1

您只需要将它们浮动或将它们设置为内联或内联块，或者包含它们的任何元素（这将更清晰），这非常容易：

http://www.bootply.com/114841

在这种特殊情况下：

a, form{
  float: left;
}

或

a, form{
  display: inline-block;
}

请阅读此处的差异：https://stackoverflow.com/a/11823622/463065

Answer 2

只需在按钮

上使用float:left;即可

的CSS：

button {float:left;}

<强> DEMO

Answer 3

使用＆＃34;内联＆＃34; CSS类：

<强> HTML ：

<a href="update/">
  <button class="btn btn-default">Update Contact</button>
</a>
<form action="" method="post" class="inline">
  <button type="submit" class="btn btn-default">Delete Contact</button>
</form>

<强> CSS：

.inline {
   display: inline-block;
 }

例：
http://www.bootply.com/114837

同一行中的bootstrap按钮 - 一个元素中的一个，一个表单中的一个

3 个答案: