Allinea due blocchi in linea a sinistra e a destra sulla stessa riga

Come posso allineare due blocchi in linea in modo che uno sia lasciato e l’altro sia giusto sulla stessa linea? Perche’e’cosi difficile? C’è qualcosa come \ hfill di LaTeX che può consumare lo spazio tra di loro per raggiungere questo objective?

Non voglio usare i float perché con i blocchi inline posso allineare le linee di base. E quando la finestra è troppo piccola per entrambi, con i blocchi in linea posso semplicemente cambiare l’allineamento del testo al centro e saranno centrati l’uno sull’altro. Il posizionamento relativo (genitore) + assoluto (elemento) ha gli stessi problemi dei float.

L’HTML5:

Title

Il css:

 header { //text-align: center; // will set in js when the nav overflows (i think) } h1 { display: inline-block; margin-top: 0.321em; } nav { display: inline-block; vertical-align: baseline; } 

Sono vicini l’uno all’altra, ma voglio il nav sulla destra.

un diagramma

Modifica: sono passati 3 anni da quando ho risposto a questa domanda e suppongo che sia necessaria una soluzione più moderna, anche se quella attuale fa la cosa 🙂

1. Flexbox

È di gran lunga il più breve e più flessibile. Applica display: flex; al contenitore genitore e aggiusta il posizionamento dei suoi figli per justify-content: space-between; come questo:

 .header { display: flex; justify-content: space-between; } 

Può essere visto online qui – http://jsfiddle.net/skip405/NfeVh/1073/

Si noti tuttavia che il supporto di flexbox è IE10 e versioni successive. Se è necessario supportare IE 9 o precedente, utilizzare la seguente soluzione:

2. È ansible utilizzare l’ text-align: justify del text-align: justify tecnica qui.

 .header { background: #ccc; text-align: justify; /* ie 7*/ *width: 100%; *-ms-text-justify: distribute-all-lines; *text-justify: distribute-all-lines; } .header:after{ content: ''; display: inline-block; width: 100%; height: 0; font-size:0; line-height:0; } h1 { display: inline-block; margin-top: 0.321em; /* ie 7*/ *display: inline; *zoom: 1; *text-align: left; } .nav { display: inline-block; vertical-align: baseline; /* ie 7*/ *display: inline; *zoom:1; *text-align: right; } 

L’esempio di lavoro può essere visto qui: http://jsfiddle.net/skip405/NfeVh/4/ . Questo codice funziona da IE7 e versioni successive

Se gli elementi di blocco in linea in HTML non sono separati con lo spazio, questa soluzione non funzionerà – vedi esempio http://jsfiddle.net/NfeVh/1408/ . Questo potrebbe essere un caso quando inserisci contenuti con Javascript.

Se non ci preoccupiamo di IE7, semplicemente omettiamo le proprietà delle star-hack. L’esempio di lavoro che utilizza il tuo markup è qui: http://jsfiddle.net/skip405/NfeVh/5/ . Ho appena aggiunto l’ header:after parte e giustificato il contenuto.

Per risolvere il problema dello spazio extra che viene inserito con lo pseudo-elemento successivo, si può fare un trucco per impostare la font-size del font-size 0 per l’elemento genitore e reimpostarla per dire 14px per gli elementi figli. L’esempio di lavoro di questo trucco può essere visto qui: http://jsfiddle.net/skip405/NfeVh/326/

Approfittando della risposta di @ skip405, ho creato un mixin per Sass:

 @mixin inline-block-lr($container,$left,$right){ #{$container}{ text-align: justify; &:after{ content: ''; display: inline-block; width: 100%; height: 0; font-size:0; line-height:0; } } #{$left} { display: inline-block; vertical-align: middle; } #{$right} { display: inline-block; vertical-align: middle; } } 

Accetta 3 parametri. Il contenitore, l’elemento sinistro e quello destro. Ad esempio, per adattare la domanda, potresti usarla in questo modo:

 @include inline-block-lr('header', 'h1', 'nav'); 

Se non vuoi usare i float, dovrai avvolgere il tuo nav:

 

Title

… e aggiungi alcuni css più specifici:

 header { //text-align: center; // will set in js when the nav overflows (i think) width:960px;/*Change as needed*/ height:75px;/*Change as needed*/ } h1 { display: inline-block; margin-top: 0.321em; } #navWrap{ position:absolute; top:50px; /*Change as needed*/ right:0; } nav { display: inline-block; vertical-align: baseline; } 

Potrebbe essere necessario fare un po ‘di più, ma questo è un inizio.

Se stai già usando JavaScript per centrare roba quando lo schermo è troppo piccolo (come per il tuo commento per la tua intestazione), perché non basta annullare floats / margins con JavaScript mentre ci sei e usa float e margini normalmente.

Potresti anche utilizzare le query multimediali CSS per ridurre la quantità di JavaScript che stai utilizzando.

Penso che una ansible soluzione a questo è utilizzare display: table :

 .header { display: table; width: 100%; box-sizing: border-box; } .header > * { display: table-cell; } .header > *:last-child { text-align: right; } h1 { font-size: 32px; } nav { vertical-align: baseline; } 

JSFiddle: http://jsfiddle.net/yxxrnn7j/1/

dargli il float: right e l’h1 float: left e metti un elemento con clear: entrambi dopo di loro.

Per entrambi gli elementi utilizzare

 display: inline-block; 

l’uso dell’elemento ‘nav’

 float: right;