Align-Formular Eingaben in der gleichen Spalte

Question

Was ist der beste Weg, um die Minuten unten neben der hr zu bekommen?

-Ich versuchte mit Spalten und Zeilen, aber es alles zentriert. -Ich versuchte Floats, aber es macht alles falsch ausgerichtet -Ich habe versucht, Boxen, aber ähnliche Probleme zu Spalten und Zeilen.

Vielen Dank! :)

<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

Ersetzen Sie den Code mit dieser:

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

als @Pyromonk p erwähnt ist ein Blockelement span so anstelle

Answer 2

p ist ein Blockelement, und so ist fieldset. input ist ein Inline-Element. Wenn Zeilenumbrüche das Problem sind, mit dem Sie konfrontiert sind, sollten Sie nacheinander mehrere Inline-Elemente verwenden, z. B. label und input. Blockelemente erzwingen einen Zeilenumbruch nach sich selbst und Inline-Elemente nicht, um es einfach auszudrücken. Ich sehe absolut keinen Grund für die Verwendung von fieldset und p in Ihrem Szenario, es sei denn, Sie müssen unbedingt. Wenn Sie dies tun, können Sie versuchen, ihre Anzeige auf inline-block einzustellen.

Weiterführende Literatur: MDN :: Visual formatting model