Cómo envolver dos tramos en una línea con CSS

Quiero envolver dos spans en una línea con CSS.Cómo envolver dos tramos en una línea con CSS

Aquí está mi código:

<div style="width:60px;"> 
    <span id="span1" style="float:left; display:inline;"></span> 
    <span id="span2" style="float:left; display:inline; "></span> 
</div>

Pero no funciona.

¿Cómo hacer eso?

Editar:

Quiero usar el "id", ya sea para uso div o span, sólo quiero que estén en una línea.

Cuando solo uso span sin estilo, el contenido no está en la misma línea. La segunda línea bajará.

Fuente

2010-12-23 Alex SUN

Están en una línea. ¿Qué esperas exactamente? –

los tramos son elementos 'en línea' de todos modos, no debería tener que hacer nada con ellos. –

¿Puedes describir el problema de manera diferente? Entiendo esto como que desea poner los tramos en la misma línea sin interrupción, lo que funciona bien con ese código. ¿Es eso lo que intentas hacer? –

<div style="float:left;"> 
<span style="display:inline;"></span> 
<span style="display:inline; "></span> 
</div>

Fuente

2010-12-23 17:29:54

por favor visite este enlace http://www.jsfiddle.net/LurGq/7/ –

Funciona perfectamente. ¡¡¡Muchas gracias!!! –

He visto tu enlace. Buen recurso. Gracias. –

Es el flotador hacia la izquierda lo que causa que esté en líneas separadas. Tal vez intente con un   (espacio sin interrupción) entre los tramos.

Fuente

2010-12-23 17:23:42 Samuel

Overflow maybe?

<div style="width:60px; overflow:hidden;">

Fuente

2010-12-23 17:24:46 haha

@OP se ha establecido 'float: left' en el span. para hacer que esté en una línea, desbordamiento oculto para el div. – haha

Los float y display estilos son mutuamente excluyentes, por lo que no tiene sentido utilizarlos juntos. También <span> se establece de manera predeterminada en display:inline;, de modo que es redundante de todos modos (a menos que tenga algún otro estilo en otro lugar configurándolos para otra cosa).

Fuente

2010-12-23 17:26:42 Spudley

El flotador ensuciará las cosas. Por lo general, con un flotador para trabajar también necesita un ancho. No puede hacerlos flotar uno contra el otro porque no sabe cuánto espacio ocupará cada tramo en relación con el div. Los tramos son intrínsecamente elementos en línea a menos que los defina de otra manera, por lo que deberían mostrarse de esa manera sin el flotador.

Fuente

2010-12-23 17:28:57 jbwharris

Cómo envolver dos tramos en una línea con CSS

Respuesta

Cuestiones relacionadas