html - texto - Alinee dos bloques en línea a la izquierda y a la derecha en la misma línea

salto de linea html

Question

¿Cómo puedo alinear dos bloques en línea para que uno quede a la izquierda y el otro a la derecha en la misma línea? ¿Por qué es tan difícil? ¿Hay algo así como LaTeX''s / hfill que pueda consumir el espacio entre ellos para lograr esto?

No quiero usar flotadores porque con bloques en línea puedo alinear las líneas de base. Y cuando la ventana es demasiado pequeña para ambos, con bloques en línea puedo simplemente cambiar el texto, alinearlo al centro y se centrarán uno encima del otro. El posicionamiento relativo (principal) + absoluto (elemento) tiene los mismos problemas que los flotantes.

El HTML5:

<header>
<h1>Title</h1>
<nav>
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</nav>
</header>

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

Están bien uno al lado del otro, pero quiero el nav a la derecha.

Answer 1

Aprovechando la respuesta de @ skip405, hice una mezcla de Sass para ello:

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

Acepta 3 parámetros. El contenedor, el elemento izquierdo y el derecho. Por ejemplo, para ajustarse a la pregunta, podrías usarla así:

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

Answer 2

Creo que una posible solución a esto es usar 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/

Answer 3

Para ambos elementos use

display: inline-block;

para el uso del elemento ''nav''

float: right;

Answer 4

Si no quieres usar flotadores, vas a tener que ajustar tu navegador:

<header>
<h1>Title</h1>
<div id="navWrap">
<nav>
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</nav>
</div>
</header>

... y agrega algunos css más específicos:

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

Es posible que deba hacer un poco más, pero eso es un comienzo.

Answer 5

Si ya está utilizando JavaScript para centrar las cosas cuando la pantalla es demasiado pequeña (según su comentario para su encabezado), ¿por qué no simplemente deshacer flotantes / márgenes con JavaScript mientras está en ello y usar flotantes y márgenes normalmente?

Incluso podría usar consultas de medios de CSS para reducir la cantidad de JavaScript que está utilizando.

Answer 6

dale float: right y h1 float: left y pon un elemento con clear: ambos después de ellos.

Answer 7

Editar: Han pasado 3 años desde que contesté esta pregunta y supongo que se necesita una solución más moderna, aunque la actual lo hace :)

1. Flexbox

Es de lejos el más corto y flexible. Aplicar display: flex; al contenedor primario y ajuste la ubicación de sus hijos por justify-content: space-between; Me gusta esto:

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

Se puede ver en línea aquí - http://jsfiddle.net/skip405/NfeVh/1073/

Sin embargo, tenga en cuenta que el soporte de flexbox es IE10 y más reciente. Si necesita admitir IE 9 o una versión anterior, use la siguiente solución:

2. Puedes usar la técnica text-align: justify justify aquí.

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

El ejemplo de trabajo se puede ver aquí: http://jsfiddle.net/skip405/NfeVh/4/ . Este código funciona desde IE7 y superior

Si los elementos de bloque en línea en HTML no están separados por espacio, esta solución no funcionará; consulte el ejemplo http://jsfiddle.net/NfeVh/1408/ . Este podría ser un caso cuando inserta contenido con Javascript.

Si no nos importa IE7 simplemente omite las propiedades de Star-Hack. El ejemplo de trabajo usando su marcado está aquí - http://jsfiddle.net/skip405/NfeVh/5/ . Acabo de agregar el header:after parte y justifiqué el contenido.

Para resolver el problema del espacio adicional que se inserta con el pseudo-elemento after , se puede hacer un truco para establecer el font-size en 0 para el elemento padre y reiniciarlo para decir 14px para los elementos secundarios. El ejemplo de trabajo de este truco se puede ver aquí: http://jsfiddle.net/skip405/NfeVh/326/