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

Ho due elementi sulla stessa linea flottati a sinistra e flottati 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 che element2 si allinei accanto a element1 con circa 10 pixel di riempimento tra i due. Il problema è che la larghezza di element2 può cambiare a seconda del contenuto e del browser (dimensione del carattere, ecc.) Quindi non è sempre perfettamente allineata con element1 (non posso semplicemente applicare un margine destro e spostarlo).

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 sono riuscito a farlo funzionare).

Utilizzando display:inline-block

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

Esempio

<style>
div {
    display: flex;
    justify-content: space-between;  
}
</style>

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>  

#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/

riferimento: la differenza tra margini CSS e riempimento

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

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

ecco un esempio più formattato per renderlo più chiaro:

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

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

Per questo esempio in particolare, puoi applicare quanto sopra come compagno (suppongo che il genitore sia body. Se non metti il ​​genitore giusto), puoi anche cambiare 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; 
}

tieni presente che white-space: nowrap;ed overlow-x: auto;è ciò di cui hai bisogno per costringerli a essere in una riga. spazio bianco: nowrap; disabilita il wrapping. E troppo basso-x: auto; per attivare lo scorrimento, quando l'elemento supera il limite di frame.

Nei casi in cui utilizzo elementi float in questo modo, di solito ho bisogno di essere sicuro che l'elemento contenitore sarà sempre abbastanza grande per le larghezze di entrambi gli elementi floated più il margine desiderato per adattarsi al suo interno. Il modo più semplice per farlo è ovviamente quello di dare ad entrambi gli elementi interni larghezze fisse che si adatteranno correttamente all'interno dell'elemento esterno in questo modo:

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

Se non puoi farlo perché si tratta di un layout di larghezza in scala, un'altra opzione è quella di avere ogni set di dimensioni come percentuali come:

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

Questo diventa complicato dove hai bisogno di qualcosa del genere:

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

In casi come questo, trovo che a volte l'opzione migliore sia non usare i float e utilizzare il posizionamento relativo / assoluto per ottenere lo stesso effetto in questo modo:

#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;}

Sebbene questa non sia una soluzione flottante, si traduce in colonne affiancate in cui hanno la stessa altezza e una può rimanere fluida mentre l'altra ha una larghezza statica.

Cambia il tuo css come sotto

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

Ecco il JSFiddle http://jsfiddle.net/a4aME/

Questo è quello che ho usato per un tipo di utilizzo simile al tuo.

<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>

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

Regola la larghezza e l'imbottitura secondo le tue esigenze. Nota - Non superare la 'larghezza' complessivamente più del 100% (ele1_width + ele2_width) per aggiungere 'padding', mantienila inferiore al 100%.