H1 a la izquierda, "botones" de la derecha, alineado verticalmente

Question

Estoy tratando de mostrar en una línea:

• un elemento H1 alineado a la izquierda de la caja que contiene
• varios botones" "(elementos a aquí) alineados a la derecha de la caja que contiene
• todo estar en la misma línea base

¿es posible hacer esto con un mínimo de marcas (es decir, sin elementos de envoltura) y sin tener que configurar precisa alturas, línea-hei peleas, margen de granito, etc.

<div id="block1"> 
    <h1>What a great title</h1> 
    <a href="javascript:void(0)">This link can kill you</a> 
    <a href="javascript:void(0)">Click if you dare</a> 
</div> 

El violín aquí muestra lo que siento son dos direcciones incompatibles (inline-bloques y no se puede alinear a la derecha frente a la derecha del flotador y no se puede alinear verticalmente): http://jsfiddle.net/GlauberRocha/bUsvX/

¿Alguna idea?

Answer 1

tiene un problema potencial con ese diseño - ¿y si tu H1 es demasiado largo y también lo son los botones? Ellos correrán el uno al otro. Debido a esto, ningún CSS simple servirá - CSS no hace magia así - tendría que implicar algún tipo de solución al problema anterior.

Sin embargo, lo que quiere simplemente se puede lograr utilizando posicionamiento absoluto:

<div style="position: relative;"> 
    <h1 style="position: absolute; left: 0; top: 0">What a great title</h1> 
    <div style="position: absolute; right: 0; top: 0; text-align: right"> 
     <a href="javascript: void(0)">This link can kill you</a> 
     <a href="javascript: void(0)">Click if you dare</a> 
    </div> 
</div> 

Si está realmente miedo de que la cabecera y el contenedor de anclaje podrían funcionar en el uno al otro en función de los contenidos generados, puede utilizar CSS max-width y overflow propiedades para restringir sus cuadros de contenido a algunos valores razonables. El contenido desbordado estará oculto, pero al menos el diseño no se romperá visualmente. Asumo la siguiente modificación del código anterior (perdón por el duplicado) serviría a los fines:

<div style="position: relative;"> 
    <h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1> 
    <div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden"> 
     <a href="javascript: void(0)">This link can kill you</a> 
     <a href="javascript: void(0)">Click if you dare</a> 
    </div> 
</div> 

Como colofón, se no puede lograr esto mediante una combinación propiedad CSS sencillo, ya que con CSS (y HTML) , el contenido fluye de izquierda a derecha y de arriba a abajo, o se convierte en posición absoluta o fija, lo que interrumpe el flujo. De todos modos, no quiere permanecer en la misma línea, y usted, como diseñador de planos, se queda con la resolución de las ambigüedades que dicho diseño introduciría, como qué hacer cuando los dos trenes que circulan desde cada dirección chocan frontalmente entre sí:)

Answer 2

que tenían el mismo problema .. Añadir a la display:inline h1, a continuación, para los botones: float:right; display:inline;

ejemplo (con uso de Twitter Bootstrap):

<h2 style="display:inline">Users</h2> 

<a href="users.xls"><i class="icon-download-alt"></i>XLS</a> 

<form style="display:inline; float:right;"> 
    <input type="text" class="input-medium search-query" name="search"> 
    <button class="btn" type="submit">Search</button> 
</form> 

Answer 3

es difícil de lograr sin ningún tipo de elementos de envoltura o valores fijos ...

Adición de una línea de altura fija tanto al encabezado y los Enlaces resolvería su problema bastante rápido.

• Alinea tus enlaces con 'display: block; flotar: derecha 'a la derecha.
• Ahora configure "altura de línea: 40px;" tanto para el título y los enlaces

debería funcionar, pero sólo cuando el tamaño de la partida a no cambia ....

Answer 4

lo hice a mi sitio hace bastante: un h2 en el izquierda, y un botón a la derecha. Captura de pantalla: cl.ly/image/3K3i412F0M2t

Código:

<div id="side_bar" class="clearfix"> 
    <h2 style="float: left;">Charity Map</h2> 
    <button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button> 
</div> 

Answer 5

Un enfoque potencial para esto, dependiendo de sus necesidades exactas, es utilizar un diseño de tabla:

#block3 { 
    display: table; 
    width: 100%; 
    box-sizing: border-box; 
} 

#block3 > * { 
    display: table-cell; 
} 

#block3 > *:last-child { 
    text-align: right; 
} 

jsFiddle: http://jsfiddle.net/bUsvX/39/

Si desea que los botones estén estrictamente alineados, creo que esta solución requiere otro elemento para envolverlos:

JSFiddle: http://jsfiddle.net/bUsvX/40/