Gleichmäßige Ausrichtung und reaktionsfähig für Dropdown-Listen HTML/CSS

Question

Ich habe ein paar Optionen in HTML mit Dropdown-Listen mit dem 'Select'-Tag. Ich möchte sie reaktionsfähig machen, so dass sich die Größe des Bildschirms bei der Größenanpassung langsam gleichmäßig aufeinander stapelt. Im Moment ist es etwas ansprechbar, aber es wird nicht gleichmäßig ausgerichtet. Ich möchte alle Titel und die Dropdown-Listen gleichmäßig ausrichten. Ich habe versucht zu tun:

text-align: right; 
float: left; 
padding: 5px; 
margin-top: 10px; 

aber dies löst nicht das Problem. Jeder Rat würde sehr geschätzt werden!

Also sollte die Spitze 'Haustyp' und 'Adresse' haben; 2. Reihe sollte "Altersklasse" und "Klubs" und "Zahlungsart" haben; dann sollte die letzte Zeile 'Startdatum' und 'Enddatum' haben, wenn es im Vollbildmodus ist. Jede Dropdown-Liste sollte gleichmäßig ausgerichtet sein (z. B. würde die Dropdown-Liste für den Haustyp mit der Altersspanne und dem Anfangsdatum übereinstimmen; die Adresse würde mit den Vereinen und dem Enddatum übereinstimmen).

JSFiddle: https://jsfiddle.net/q3h0qkhm/2/

Answer 1

Versuchen Sie das, was Sie richtig erwartet haben.

<div class="row"> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
    <div id="home" class="form-group"> Home Type: 
     <select id="homeDDL" class="form-control"> 
     </select> 
    </div> 
    </div> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
    <div id="address" class="form-group"> Address: 
     <select id="addressDDL" class="form-control"> 
     </select> 
    </div> 
    </div> 
    <div class="col-md-4 col-sm-4 col-xs-12"> 
    <div id="age" class="form-group"> Age Range: 
     <select id="ageDDL" class="form-control"> 
     </select> 
    </div> 
    </div> 
    <div class="col-md-4 col-sm-4 col-xs-12"> 
    <div id="clubs" class="form-group"> Clubs: 
     <select id="clubsDDL" class="form-control"> 
     </select> 
    </div> 
    </div> 
    <div class="col-md-4 col-sm-4 col-xs-12"> 
    <div id="pay" class="form-group"> Payment Type: 
     <select id="payDDL" class="form-control"> 
     </select> 
    </div> 
    </div> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
    <div id="startDate" class="form-group"> Start Date: 
     <input type="text" id="StartDate" class="form-control" /> 
    </div> 
    </div> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
    <div id="endDate" class="form-group"> End Date: 
     <input type="text" id="EndDate" class="form-control" /> 
    </div> 
    </div> 
</div> 

Answer 2

Versuchen Sie, Breite hinzuzufügen: 320px; zu deinen Divs. Das räumt viel auf.

text-align: right; 
float: left; 
padding: 5px; 
margin-top: 10px; 
width: 320px; 

Answer 3

diese Art und Weise folgen -

<form class="form-horizontal"> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
     <div class="col-sm-10"> 
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
     <div class="col-sm-10"> 
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <div class="checkbox"> 
      <label> 
       <input type="checkbox"> Remember me 
      </label> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <button type="submit" class="btn btn-default">Sign in</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</form> 

Answer 4

I Etiketten für jeden Tag select und hinzugefügt CSS dazu, so dass die Etiketten alle die gleiche Breite sind hinzugefügt haben.

CSS:

.row label{width: 100px; float: left; margin-right: 10px;} 

JSFiddle: https://jsfiddle.net/88sr5wfk/

Answer 5

die Sie interessieren, fügen Sie einfach Höhe und Breite in die .row

.row{ 
width:100%; 
height:120px; 
} 

Das oben nach Hause und Adresse hält, dann Alter, Club, Zahlung und Datum des letzten Starts & Enddatum. Um den Abstand unter ihnen in dieser Phase zu reduzieren, reduzieren Sie einfach die Höhe von .row