Stile pagina: alternativa all'utilizzo dei galleggianti

Question

Ogni volta che si desidera posizionare gli elementi uno accanto all'altro, tendono a utilizzare i galleggianti su di essi. come usare due div con float: lasciato su di loro. Mi chiedo se sia la migliore strategia o se esiste un'alternativa migliore.

Questo è un esempio di codice

<div> 
    <div style="float:left"> 
    <p>Alphabet</p> 
    <select style="width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
    </div> 
     <div style="float:left; margin-left:20px;"> 
     <p>Number</p><input type="text" value="123" /> 
     </div> 
</div> 

Cos'altro posso migliorare nel codice di cui sopra. È davvero necessario questo <p> o dovrei usare qualche altro tag.

A Live Example

Answer 1

usare per esempio style="display:inline-block"

E sulla tua seconda domanda:

<div style="display:inline-block"> 
    <label for="alphabet" style="display:block;">Alphabet</label> 
    <select id="alphabet" style=" width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
</div> 

utilizzando label è più semantica, e applicando display:block ad esso, rende abbracciano l'intera larghezza.

Prova anche a non utilizzare in linea css.

Answer 2

Un'alternativa potrebbe essere l'uso di display:inline-block; e l'uso di etichette come nell'esempio this.

Le etichette sono l'ideale per i dispositivi con capacità di visualizzazione limitate, soprattutto portatili, poiché facendo clic su di essi si attiverà il campo specificato. Dovresti sempre usarli.

In ogni caso, non vedo il punto di non usare i galleggianti. Se sai come usarli correttamente, sono fantastici e sono compatibili su tutti i browser.

Answer 3

Utilizzare float: left;. Non c'è motivo per non usarlo in questa situazione.

È molto ben supportato e "inline-block" ti darà problemi a meno che tu non lo hackerò per i browser più vecchi .. quando avresti potuto usare float: left; per tutto il tempo.