Question

我有一个html表单和一个div类。两者均由按钮表示，并以不同的行出现。（一个在另一个下面）。我希望两个按钮都显示在同一行上。我该如何实现？

  <div class="form">
    <form method="POST" action="{% url 'mytab' %}">
      {% csrf_token %}
        <button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down"></i></button>
      <input type="hidden" id="data" name="input name" value="">
    </form>
  </div>
  <div class="button-group">
    <button class="btn btn-primary btn-sm" onClick="javascript:history.go(-1);" disabled><i class="fa fa-angle-double-down"></i></button>
  </div>

谢谢

Answer 1

对两个div使用此样式：

<style>
    .form{
        display: inline-block
    }
    .button-group{
        display: inline-block
    }
</style>

这应该有效。

Answer 2

include样式=“ float：left”用于表格div。

<div class="form" style="float:left;">
<form method="POST" action="">

    <button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down">sdfgsdfg</i></button>
  <input type="hidden" id="data" name="input name" value="">
</form>

Answer 3

尝试此CSS：

.form,.button-group {
  display: inline-block;
}

Answer 4

您所要做的就是制作div.both并包含两个div，然后在CSS中的display: flex上放一个div.both。

 <div class="both" >
 <div class="form">
    <form>
     <button>uno</button>
    </form>
  </div>
  <div class="button-group">
  <button>dos</button>
  </div>
     </div>

CSS

div.both {
  display: flex;
}

Answer 5

只需复制并粘贴此代码

<div class="form" style="float: left;">
<form method="POST" action="{% url 'mytab' %}">
  {% csrf_token %}
    <button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down"></i></button>
  <input type="hidden" id="data" name="input name" value="">
</form>

表格和div类在同一行

5 个答案: