Mi duda no se trata de nada a vida o muerte. Es más bien una espina que quiero quitarme.
Años atrás necesité haber usado la propiedad "display" y su valor "inline-block" para cierto objetivo. No pude debido a su escaso o erróneo soporte en navegadores. En Firefox, por ejemplo, ese valor no fue soportado hasta la versión 3.x. El caso es que teniendo el CSS más asentado, quiero averiguar si podría haber conseguido simular su comportamiento en aquellos tiempos (sin recurrir a JavaScript).
Por ejemplo, supongamos que quiero poner en la misma línea, un texto, un enlace, otro texto y otro enlace, teniendo los enlaces unas dimensiones concretas porque disponen de una imagen de fondo que "cambia" con eventos CSS de foco y ratón (lo que hacen estos eventos es desplazar la imagen de fondo arriba o abajo para dar efecto de cambio sin que haya retrasos de carga).
Debido a ese requisito de los enlaces, lo único que me viene a la cabeza es usar "display: block" (para darles un tamaño) en conjunto con "float: left" o "float: right" (para que no salten de línea). Eso sí, para mantener el buen orden de los elementos, por lo que he podido experimentar, debo de aplicar esto a todos los correspondientes a la misma línea. Esto expresado en XHTML + CSS:
Código:
Los enlaces tienen fondos de color en los ejemplos, pero llevarían una imagen. Aunque el resultado me convence, ¿Existía (existe) alguna manera de lograr algo semejante de otra manera? Remarco la importancia de que los enlaces sean enlaces y no otros elementos "recubiertos" por enlaces, ya que han de ser sensibles al foco del cursor del teclado y no sólo del ratón, para que así el efecto sea idéntico. Como elemento "inline" que por defecto tenga dimensiones el único que se me ocurre es "image"... Pero claro, éste no gana foco.<span style="float: left;">Text 1</span> <a href="#" style="display: block; float: left; width: 20px; height: 20px; background-color: red;"></a> <span style="float: left;">Text 2</span> <a href="#" style="display: block; float: left; width: 20px; height: 20px; background-color: blue;"></a>
Muchas gracias :) .
