Ver Mensaje Individual
  #5 (permalink)  
Antiguo 30/07/2008, 02:15
Avatar de tunait
tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
Respuesta: Lista horizontal centrada en un div

Cita:
Iniciado por icisneros Ver Mensaje
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 Ver Mensaje
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