Cita:
Iniciado por icisneros La segunda opción no me sirve, porque el número de elementos como la anchura de la lista es variable en función del tipo de usuario.
ok
Cita:
Iniciado por icisneros Y sobre la primera opción, al quitar el float se descuadra, pasa cada icono a una linea diferente, pero de forma alterada, al quitar el inline hace la lista en vertical, pero al quitar el float hace una especie de lista vertical pero descuadrada.
En cada item de la lista tienes insertada una imagen, un salto de línea y un texto en un span. Un elemento de línea no puede (o no debería) contener un salto de línea dentro de sí mismo. Eso es lo que te hace ese descuadre raro que dices. Si quitas el salto de línea entre la imagen y el span verás que se visaliza como quieres.
Si esas imágenes son íconos decorativos no deberías insertarlos como imagen en el contenido si no desde la hoja de estilos.
Código HTML:
<div id="iconhoriz" align="center">
<ul class="icons">
<li title="Inicio">
<a href="http://www.vendermiweb.com">
<span class="sispan">Inicio</span>
</a>
</li>
<li title="Foro">
<a href="http://www.vendermiweb.com">
<span class="sispan">Foro</span>
</a>
</li>
</ul>
</div>
Código:
#iconhoriz li {
/* float: left;*/
text-align: center;
margin:0;
padding-right: 20px;
padding-top: 10px;
list-style: none;
background: none;
position: relative;
display : inline;
background-image: url(img.png);
background-repeat: no-repeat;
}
Eso, tal cual, se visualiza correctamente