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/