linea di rottura dopo inserimento senza html markup

Question

Sto provando a visualizzare un numero di ingressi e delle etichette corrispondenti. Sono entrambi elementi inline, e ho una soluzione di lavoro con l'aggiunta di un tag br alla fine in questo modo

<label for="hello"></label> 
<input id="hello" type="text" /> 
<br> 
<label for="stackoverflow"></label> 
<input id="stackoverflow" /> 

Id piacerebbe risolvere questo senza estranea markup HTML, cioè con i CSS. Qual è il modo più semplice per farlo?

ho visto altre domande simili a questo, ma allineamento per riga invece che per colonna.

Answer 1

Puoi avvolgere le etichette intorno agli ingressi e li visualizza come blocchi:

<style> 
    label { display: block; } 
</style> 

<label> 
    Hello: <input name="hello"> 
</label> 
<label> 
    StackOverflow: <input name="stackoverflow"> 
</label> 

noti che quando si esegue questa operazione non è necessario utilizzare l'attributo for="name".

L'altro modo (se non si desidera che le etichette avvolte intorno agli ingressi) è quello di galleggiare le etichette a sinistra:

<style> 
    label { float: left; clear: left; } 
</style> 

Tuttavia, io in genere preferisco un po 'più di markup, qualcosa che collega la label e input in un solo elemento logico, chiamato campo:

<div class="field"> 
    <label for="hello">Hello</label> 
    <input name="hello"> 
</div> 
<div class="field"> 
    <label for="stackoverflow">Stackoverflow</label> 
    <input name="stackoverflow"> 
</div> 

poiché ogni campo è un div, verrà visualizzato come un blocco automatica lly, ma puoi controllarlo anche per i singoli campi.

Answer 2

Provare a impostare display:inline-block per gli elementi input e label. Quindi è possibile aggiungere tutti css specifico elemento di blocco come witdh o margin-bottom.

È anche possibile impostare il vostro input e label-display:block e aggiungere margin-bottom solo al l'ingresso. Oppure si può invertire e aggiungere un margin-top alle etichette;)

Se si desidera rimuovere il margine sull'ultimo elemento è possibile utilizzare input:last-child {margin-bottom:0;}

input, label {display:block;} 
input {margin-bottom:18px;} 
input:last-child {margin-bottom:0;} 

/* Or to be specific you can use the attribut-selector 
    which only works on inputs with type="text" 
*/ 
input[type="text"]:last-child {margin-bottom:0;}