Come allineare due elementi sulla stessa riga senza modificare l'HTML

Question

Ho due elementi sulla stessa riga flottato a sinistra e flottato a destra.

<style type="text/css"> 
#element1 {float:left;} 
#element2 {float:right;} 
</style> 

<div id="element1"> 
element 1 markup 
</div> 
<div id="element2"> 
element 2 markup 
</div> 

Ho bisogno per element2 per allineare accanto element1 con circa 10 pixel di riempimento tra i due. Il problema è che la larghezza dell'elemento2 può cambiare a seconda del contenuto e del browser (dimensione del carattere, ecc.), Quindi non è sempre allineata perfettamente con element1 (non posso semplicemente applicare un margine destro e spostarlo sopra).

Inoltre, non posso modificare il markup.

C'è un modo uniforme per allinearli? Ho provato margin-right con una percentuale, ho provato un margine negativo su element1 per avvicinare element2 (ma non riuscivo a farlo funzionare).

Answer 1

Utilizzando display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;} 

Example

Answer 2

Cambia la tua css, come di seguito

#element1 {float:left;margin-right:10px;} 
#element2 {float:left;} 

Ecco l'JSFiddle http://jsfiddle.net/a4aME/

Answer 3

#element1 {float:left;} 
#element2 {padding-left : 20px; float:left;} 

violino: http://jsfiddle.net/sKqZJ/

o

#element1 {float:left;} 
#element2 {margin-left : 20px;float:left;} 

violino: http://jsfiddle.net/sKqZJ/1/

o

#element1 {padding-right : 20px; float:left;} 
#element2 {float:left;} 

violino: http://jsfiddle.net/sKqZJ/2/

o

#element1 {margin-right : 20px; float:left;} 
#element2 {float:left;} 

violino: http://jsfiddle.net/sKqZJ/3/

di riferimento: The Difference Between CSS Margins and Padding

Answer 4

Nei casi in cui io uso elementi mobili del genere, di solito bisogno di essere sicuri che l'elemento contenitore sarà sempre abbastanza grande per la larghezza di entrambi elementi flottati più il margine desiderato per tutti gli elementi al suo interno.Il modo più semplice per farlo è ovviamente dare entrambi gli elementi interni larghezze fisse che si inserisce correttamente all'interno dell'elemento esterno simili:

#container {width: 960px;} 
#element1 {float:left; width:745px; margin-right:15px;} 
#element2 {float:right; width:200px;} 

Se non è possibile farlo perché questo è un layout larghezza di scala, un altro opzione è quella di avere ogni insieme di dimensioni sia percentuali come:

#element1 {float:left; width:70%; margin-right:10%} 
#element2 {float:right; width:20%;} 

questo diventa difficile in cui è necessario qualcosa di simile:

#element1 {float:left; width:70%; margin-right:10%} 
#element2 {float:right; width:200px;} 

In casi come questo, mi trovo ° a volte la soluzione migliore è di non usare galleggianti, e usa posizionamento relativo/assoluto per ottenere lo stesso effetto come questo:

#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */ 
#element1 {margin-right:215px;} 
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;} 

Mentre questa non è una soluzione flottato, esso comporta fianco colonne laterali dove hanno la stessa altezza e uno può rimanere fluido mentre l'altro ha una larghezza statica.

Answer 5

Utilizzando la visualizzazione : blocco in linea; E più in generale quando hai un genitore (c'è sempre un genitore eccetto per html) usa display: inline-block; per gli elementi interni. e costringerli a rimanere nella stessa linea anche quando la finestra si restringe (contratta). Aggiungere per il genitore le due proprietà:

white-space: nowrap; 
    overflow-x: auto; 

qui un esempio più formattato per chiarire:

.parent { 
    white-space: nowrap; 
    overflow-x: auto; 
} 

.children { 
    display: inline-block; 
    margin-left: 20px; 
} 

Per questo esempio particolarmente, è possibile applicare quanto sopra come compagni (sto supponendo che il genitore è il corpo, se non si mette il genitore giusto), è anche possibile modificare l'html e aggiungere un genitore per loro se è possibile.

body { /*body may pose problem depend on you context, there is no better then have a specific parent*/ 
     white-space: nowrap; 
     overflow-x: auto; 
} 

#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/ 
    display: inline-block; 
    margin-left: 10px; 
} 

tenere a mente che white-space: nowrap; e overlow-x: auto; è ciò che è necessario per costringerli ad essere in una sola riga. white-space: nowrap; disabilitare il wrapping. E overlow-x: auto; per attivare lo scorrimento, quando l'elemento supera il limite del frame.