31.1.07

CSS: SPAN con ancho fijo

Sabido es que las etiquetas HTML tiene por omisión una disposición en bloque (block) o en línea (inline). Son ejemplo de elementos dispuestos en bloque <div>, <p>, <h1>, <form> y <li>; mientras que los que se muestran en línea pueden ser <span>, <a>, <label>, <strong>, <b> y <em>. Una de las características de estos últimos es que se le puede cambiar el largo (width).

span { width: 100px; }

En teoría, esto hace que la caja que genera el <span> tenga 100 pixels de largo, pero lamentablemente en el resto de los navegadores el <span> sólo tendrá el largo de los caracteres que aloje. Para solucionar este problema se puede utilizar el siguiente truco:

span {
width: 100px;
display:block;
}

Esto hace que el <span> se convierta en un elemento en bloque, pero también causará que el siguiente elemento en línea salte a la línea siguiente. Para evitar esto se puede agregar float:left al .

6 Comentarios:

Anónimo dice...

Muy bueno el truco! Me has salvado la vida! Gracias!

anibal dice...

Si barbaro pero el texto dentro del span se queda desalineado verticalmente con el resto de lo que tengo dentro de una celda :(

anibal dice...

Lo pude arreglar dandole un margin-top para que bajara un poquito :)

m-villasana dice...

¡Bárbaro tío! Otra vida que salvas, Mil gracias.

giovannilupus dice...

Juega con esto, aunque a lo mejor te sirva mejor esto:
inline-block

estos son el resto:
inline
block
list-item
run-in
inline-block
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
none
inherit

giovannilupus dice...

Mira esto, sale juntito y bien alineado, por cierto, en el html cambien el signo menor y mayor de las etiquetas porque no me permite ponerlas, en su lugar puse esto []:

.foto{
width:80px;
height:100px;
display:table-cell;
}
.comentario{
width:400px;
display:table-cell;
height:100px;
border: 1px solid #eceff5;
background-color: #eceff5;
}

y en la pagina lo pones así:

[span class="foto"] [img src="imagenes/amigo00.jpg"][/span]
[span class="comentario"]
alooooooooooooooooo[/span]