Cómo alinear dos elementos en la misma línea sin cambiar HTML

Question

Tengo dos elementos en la misma línea flotados a la izquierda y flotados a la derecha.

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

Necesito que el elemento2 se alinee junto al elemento1 con unos 10 píxeles de relleno entre los dos. El problema es que el ancho del elemento2 puede cambiar según el contenido y el navegador (tamaño de fuente, etc.), por lo que no siempre se alinea perfectamente con el elemento1 (no puedo aplicar un margen derecho y moverlo).

Tampoco puedo cambiar el marcado.

¿Hay una forma uniforme de alinearlos? Probé margen-derecha con un porcentaje, probé un margen negativo en el elemento 1 para acercar el elemento2 (pero no pude hacerlo funcionar).

Answer 1

Usando display:inline-block

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

Example

Answer 2

Cambiar la CSS como a continuación

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

Aquí está el jsFiddle http://jsfiddle.net/a4aME/

Answer 3

#element1 {float:left;} 
#element2 {padding-left : 20px; float:left;} 

violín: http://jsfiddle.net/sKqZJ/

o

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

violín: http://jsfiddle.net/sKqZJ/1/

o

#element1 {padding-right : 20px; float:left;} 
#element2 {float:left;} 

violín: http://jsfiddle.net/sKqZJ/2/

o

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

violín: http://jsfiddle.net/sKqZJ/3/

referencia: The Difference Between CSS Margins and Padding

Answer 4

En los casos en que utilizo elementos flotantes como que, por lo general necesita estar seguro de que el elemento contenedor siempre será lo suficientemente grande para las anchuras de los dos Elementos flotados más el margen deseado para que quepan dentro de él.La forma más sencilla de hacerlo es, obviamente, para dar a ambos elementos internos anchos fijos que se ajuste correctamente en el interior del elemento exterior como esto:

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

Si no puede hacerlo porque se trata de un diseño de ancho de escala, otro opción es hacer que cada conjunto de dimensiones sea como porcentajes:

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

esto se complica cuando se necesita algo como esto:

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

En casos como éste, me parece º a veces la mejor opción es no utilizar flotadores, y el uso de posicionamiento relativo/absoluto para obtener el mismo efecto como esto:

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

Si bien esto no es una solución flotado, que da lugar a lado por columnas lado donde tienen la misma altura, y uno puede permanecer fluido mientras que el otro tiene un ancho estático.

Answer 5

Al usar display: inline-block; Y más generalmente cuando tienes un padre (siempre hay un padre a excepción de html) usa display: inline-block; para los elementos internos. y obligarlos a permanecer en la misma línea, incluso cuando la ventana se contraiga (contraiga). Añadir para el padre de la propiedad de dos:

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

aquí un ejemplo más formateado para que quede claro:

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

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

Para este ejemplo en particular, se puede aplicar lo anterior como compañero (estoy suponiendo que la el padre es el cuerpo. Si no le pusiste el padre correcto), también puedes cambiar el html y agregar un padre para ellos si es posible.

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

tener en cuenta que white-space: nowrap; y overlow-x: auto; es lo que necesita para obligarlos a estar en una sola línea. espacio en blanco: nowrap; desactivar envolver Y overlow-x: auto; para activar el desplazamiento, cuando el elemento supera el límite del cuadro.