css - 在同一列上对齐表单输入

什么是使小时数低于小时数的最佳方法是什么？

-我尝试使用列和行，但是它使所有内容偏离中心。
-我试过浮子，但使所有东西都未对准
-我试过盒子，但与列和行类似的问题。

非常感谢！ :)

<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>

最佳答案

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

<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

关于css - 在同一列上对齐表单输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43636349/