Question

在hr附近获取下方的最佳方法是什么？

- 我尝试使用列和行，但它取消了所有内容。 - 我试过漂浮物，但它使一切都不对齐 - 我尝试过盒子，但是列和行的问题类似。

非常感谢你！：）

<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">

  {% csrf_token %}
  <!-- change the form action to your script url -->

 <div class="row">
    <div class="col-xs-6">
        <p style="font-weight:bold">Start </p>
        <p style="font-weight:bold">Hr </p>
        <fieldset>
          <input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
        </fieldset>

        <p style="font-weight:bold">Min </p>
        <fieldset>
          <input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
        </fieldset>
    </div>


    <div class="col-xs-6">
        <p style="font-weight:bold">End </p>
        <p style="font-weight:bold">Hr </p>
        <fieldset>
          <input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
        </fieldset>

        <p style="font-weight:bold">Min </p>
        <fieldset>
          <input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
        </fieldset>
    </div>
</div> <!-- End all row -->
</form>

Answer 1

用以下代码替换您的代码：

<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">

  {% csrf_token %}
  <!-- change the form action to your script url -->

 <div class="row">
    <div class="col-xs-6">
        <p style="font-weight:bold">Start </p>
        <span style="font-weight:bold">Hr </span>
        <fieldset style="display:inline-block">
          <input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
        </fieldset>

        <span style="font-weight:bold">Min </span>
        <fieldset style="display:inline-block">
          <input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
        </fieldset>
    </div>


    <div class="col-xs-6">
        <p style="font-weight:bold">End </p>
        <span style="font-weight:bold">Hr </span>
        <fieldset style="display:inline-block">
          <input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
        </fieldset>

        <span style="font-weight:bold">Min </span>
        <fieldset style="display:inline-block">
          <input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
        </fieldset>
    </div>
</div> <!-- End all row -->
</form>

正如@Pyromonk提到的那样p是一个块元素，所以请改用span

Answer 2

p是一个块元素，因此fieldset。 input是内联元素。如果换行是您遇到的问题，则应该考虑连续使用一组内联元素，例如label和input。块元素在它们自身和内联元素之后强制换行，简单地说。我认为绝对没有理由在您的方案中使用fieldset和p，除非您绝对必须这样做。如果您这样做，可以尝试将其显示设置为inline-block。

进一步阅读：MDN :: Visual formatting model

在同一列上对齐表单输入

2 个答案: