フォームの入力を同じ列に揃えます

Question

時間の横にある最小値を得るにはどうすればよいですか？

- 列と行を使用しようとしましたが、すべてが集中しませんでした。 - フロートを試しましたが、すべてが整列しません。 - ボックスを試しましたが、列と行に同様の問題がありました。

ありがとうございました！ :)

<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を述べたように、私は助けに感謝ありがとう

Answer 2

pブロック要素であるので、fieldsetです。 inputはインライン要素です。改行が問題になっている場合は、一連のインライン要素を連続して使用することを検討する必要があります（たとえば、labelおよびinput）。ブロック要素は、それ自身とインライン要素の後に改行を強制し、単純な言葉でそれを置くことはありません。あなたが絶対にしなければ、あなたのシナリオではfieldsetとpを使用する理由は絶対にありません。表示する場合は、ディスプレイをinline-blockに設定してみてください。

さらに読書：MDN :: Visual formatting model