Mantenere gli elementi avvolti insieme

Question

Ho diversi elementi in HTML che desidero mantenere raggruppati quando si avvolgono. Penso che la risposta stia con alcuni CSS (o forse anche JavaScript), ma non ne sono sicuro. Per esempio, ho diversi elementi disposti in questo modo:

<label A><input A><label B><input B><label C><input C> 

Quello che succede è gli utenti a volte ridimensionare la finestra del browser, e si finisce con questo:

<label A><input A><label B> 
<input B><label C><input C> 

Nell'esempio di cui sopra, la l'ingresso B non è vicino al suo elemento di input. C'è un modo per raggruppare l'etichetta e l'input in modo che si avvolgano insieme? Ho provato div e mettendo insieme gli elementi in un tavolo con "nowrap", con risultati misti. Non mi interessa l'avvolgimento delle linee, ho solo bisogno di tenere insieme l'etichetta e l'elemento di input.

Answer 1

Potrebbe anche valere la pena di impostare i div dei genitori attorno a ciascuna coppia che si desidera tenere insieme - so che hai detto che hai provato questo, ma anche dargli una larghezza e una visualizzazione fisse: in linea; e dovrebbe funzionare

ALSOO include float: left/right; (sceglierne solo uno) In questo modo, se la finestra del browser è troppo piccola per visualizzarli tutti affiancati, prenderà invece l'end pair e lo lascerà cadere la linea successiva, ma dovrebbe mantenere tutti gli elementi all'interno e affiancati.

Answer 2

È possibile inserire ciascuna etichetta/gruppo di input in un <span> e quindi impostare il css su display:inline. Sono abbastanza sicuro che questo lo manterrà raggruppato. A seconda del layout del sito e del CSS precedente, potrebbe essere necessario modificare il css span.

Answer 3

provare qualcosa di simile:

<label>First Name: 
    <input type="text"> 
</label> 
<label>Last Name: 
    <input type="text"> 
</label> 

e impostare

label { 
    display: inline-block; 
} 

Demo http://dabblet.com/gist/3145028

Alternativa: avvolgere sia <label> e <input> in un <div> con display: inline-block

Answer 4

mettere un ll di questi elementi in un div come questo:

<div style="white-space: nowrap"> 
    ... 
</div> 

Answer 5

Dal momento che lei ha detto che questo era in una tabella, qui è probabilmente quello che stavi cercando: http://jsfiddle.net/DX9G7/

HTML:

<table border="0" cellspacing="0" cellpadding="0"> 
    <colgroup> 
     <col width="30%" /> 
     <col width="30%" /> 
     <col width="40%" /> 
    </colgroup> 
    <tr> 
     <td> 
      <div class="form-row"> 
       <label>A</label> 
       <input type="text" /> 
      </div> 
      <div class="form-row"> 
       <label>B</label> 
       <input type="text" /> 
      </div> 
      <div class="form-row"> 
       <label>C</label> 
       <input type="text" /> 
      </div> 
     </td> 
    </tr> 
</table>​ 

È ora puoi modificare il tuo css come preferisci.

Answer 6

La semplice risposta è racchiudere elementi in un altro elemento che ha un display: inline-block come stile. Quindi ...

<span class='wrapper'> 
    <span class='left-side'></span> 
    <span class='right-side'></span> 
</span> 

E

.wrapper { 
    display: inline-block; 
}