Wie man Etiketten anordnet und in HTML eingibt

Question

Ich versuche, Eingänge und Etiketten horizontal anzuordnen.

Ich habe versucht:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
      <div class="row"> 
 
       <div class="span2"> 
 
        <h2>Label1:</h2> 
 
       </div> 
 
       <div class="span2"> 
 
        <input id="Filter_1" /> 
 
       </div> 
 
       <div class="span1"> 
 
        <h2>Label2:</h2> 
 
       </div> 
 
       <div class="span1"> 
 
        <input id="Filter_2" /> 
 
       </div> 
 
       <div class="span2"> 
 
        <h2>Label3:</h2> 
 
       </div> 
 
       <div class="span2"> 
 
        <input id="Filter_3" /> 
 
       </div> 
 
       <div class="span1"> 
 
        <input id="Button1" type="button" class="btn btn-large" value="Button 1" /> 
 
       </div> 
 
      </div>

Aber das Ergebnis war schrecklich mit all dies in der linken Seite des Bildschirms, während die rechte Seite vollständig leer:

Answer 1

Wenn Sie Bootstrap verwenden, können Sie dieses Layout verwenden.

Code ausführen und im Vollseitenmodus öffnen.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-xs-6 col-md-4 col-lg-3"> 
 
     <label>Label1:</label> 
 
     <input id="Filter_1" /> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
     <label>Label2:</label> 
 
     <input id="Filter_2" /> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
 
     <label>Label3:</label> 
 
     <input id="Filter_3" /> 
 
    </div> 
 
    <div class="form-btn"> 
 
     <input id="Button1" type="button" class="btn btn-primary btn-large" value="Button 1" /> 
 
    </div> 
 
    </div> 
 
</div>

Sie können auch mehr Führung und Beispiel in forms-horizontal in bootstrap

Answer 2

Ich denke, das Attribut, das Sie suchen, ist float. Fügen Sie zu Ihrem CSS hinzu: