Wie kann der Unterstrich für das Feld gleichmäßig aussehen?

Question

Jetzt bin ich ein HTML erstellen, um nur die Word-Datei zu duplizieren. Und wie erreiche ich folgenden Ausblick? This one

Ich verwende Unterstrich, um wie das Feld zu handeln. Wie kann ich das Ende jeder Zeile gleich machen? Eine weitere Sache zu bemerken ist, dass dieses div sollte style="padding-left: 200px;" sein, im Vergleich zu der ganzen Datei.

Vielen Dank.

Answer 1

Alex, um dies zu erreichen, müssen Sie eine Form von Layout-Element verwenden. Es gibt ein paar Optionen, aber am häufigsten ist heute Flexbox.

Flexbox nutzen zu können, um dies zu erreichen, könnte man so etwas tun:

HTML:

<form class="form"> 
    <div class="row"> 
    <label>First Field</label> 
    <span> 
     <input>  
    </span> 
    </div> 
    <div class="row"> 
    <label>Second Field</label> 
    <span> 
     <input>  
    </span> 
    </div> 
    <div class="row"> 
    <label>Third and Final Field</label> 
    <span> 
     <input>  
    </span> 
    </div> 
</form> 

CSS:

* { 
    box-sizing: border-box; 
} 

.row { 
    display: flex; 
    flex-direction: row; 
} 

.row span { 
    flex: 1; 
    display: block; 
} 

.row span input { 
    width: 100%; 
    margin-left: 5px; 
    border: none; 
    border-bottom: 1px solid #000; 
    background: transparent; 
    outline: none !important; 
} 

Siehe JSFiddle