Listas horizontales en CSS

Question

¿Cuál es la mejor práctica para hacer una lista horizontal en css? Ahora sé que esta es una pregunta muy básica, pero el efecto que estoy buscando está en un sitio web como este: http://www.frontend2011.com/.

Si se desplaza hacia abajo a la porción de video con las 4 listas de columnas, verá un buen uso de la misma. Pero si doy algo como float: left y margin-left: #px; en el CSS, mi último elemento de lista siempre cae a la siguiente fila sin siquiera acercarse al borde del modelo de div box.

He oído que es por el modelo de caja y el borde/relleno/margen, pero ¿cuál es la mejor manera de superarlo? Me gustaría que las listas toquen los lados derecho e izquierdo del div pero esto me parece imposible.

Answer 1

esto podría ser un buen uso de box-sizing propiedad (soportado por todos los navegadores, Internet Explorer 8 incluido): dada una lista desordenada (y suponiendo list-elementos todos ellos con la misma altura) puede asignar este estilo para cada <li>:

li { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    float : left; 
    width : 25%; 
    padding : 15px; /* this will be applied internally, due to 
         box-sizing property */ 

} 

continuación, si desea forzar un claro después de cada 4 º li, sólo tiene que añadir

li:nth-child(4n) { 
    clear : left; 
} 

de lo contrario, si no se puede estar seguro de que cada <li> siempre tienen la misma altura que la posición inline-block en lugar de float.

Answer 2

Primero desea poner a cero margin y padding, por lo que ya no tiene la indención inherente a una lista. (Tenga en cuenta que probablemente deba hacer esto específico a través de una clase, es decir, ul class="horizontal").

Luego, flote li y dele un ancho que sea relativo (en píxeles o porcentaje) al ancho ul. La contabilización de margin entre li s puede ser más difícil para los anchos de porcentaje, sin embargo, si desea una separación absoluta (por ejemplo, 1px).

EDIT - Olvidé agregar la última adición de último minuto de la clase .horizontal a todos los selectores.

Y con el efecto caja llena: http://jsfiddle.net/MYLGv/9/

<ul class="horizontal"> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

ul.horizontal, 
ul.horizontal li { 
    margin: 0; 
    padding: 0; 
} 
ul.horizontal { 
    list-style-type: none; 
    width: 400px; 
    background: whiteSmoke; 
    overflow: auto; 
    margin: 0 auto; 
} 
ul.horizontal li { 
    float: left; 
    width: 99px; 
    height: 99px; 
    margin: 0 1px 1px 0; 
    text-align: center; 
    background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=64&d=identicon&r=PG) center center no-repeat; 
    background-color: gray; 
    color: white; 
} 

http://jsfiddle.net/MYLGv/8/

Answer 3

Ese lugar en particular, la página se ha vinculado a la siguiente utiliza CSS para hacer esas listas horizontales.

.col{ 
    width: 24%; 
    margin: 0 0 2% 1%; 
    float: left; 
} 

Answer 4

Hay varias maneras de mostrar una lista horizontal.

1) Es posible ajustar el li: s a display: inline, elementos en línea anchura, la altura y el relleno pueden no ser de estilo los mismos elementos de bloque manera pueden así que si quieres los fondos o las fronteras se deben utilizar:

2) display: inline-block muestra el li: s en una línea, manteniendo las características de un elemento de bloque, inline-block funciona en la mayoría de los navegadores, pero es posible que necesite utilizar *display: inline para IE7 y versiones posteriores. Los elementos inline y inline-block se ven afectados por la altura de línea y el tamaño de letra y puede obtener espacios no deseados entre los elementos del menú. Puede resolverlo fácilmente configurando font-size en 0 en el ul y configurándolo en el li: s .

3) En tercer lugar se puede utilizar junto con display: blockfloat: left, un problema con el flotador es que no se puede centrar fácilmente como display: inline-block puede con text-align: center y usted tiene que recordar para borrar el elemento padre (overflow: hidden en el ul es suficiente)

4) Si necesita que su lista para abarcar toda la anchura de su padre, lo más fácil que puedes hacer es usar display: table; width: 100% en el ul y display: table-cell en el li: s, por lo que se comportan ul al igual que un table

Answer 5

Es básicamente imposible hacerlo bien con CSS puro y sin utilizar una estructura de tabla/javascript, también vea here.

Usé la solución jQuery que también se sugiere allí y funciona perfectamente. Encuentre el enlace here.

Y aquí está el código:

var currentTallest = 0, 
    currentRowStart = 0, 
    rowDivs = new Array(), 
    $el, 
    topPosition = 0; 

$('.blocks').each(function() { 

    $el = $(this); 
    topPosition = $el.position().top; 

    if (currentRowStart != topPosition) { 

    // we just came to a new row. Set all the heights on the completed row 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
     rowDivs[currentDiv].height(currentTallest); 
    } 

    // set the variables for the new row 
    rowDivs.length = 0; // empty the array 
    currentRowStart = topPosition; 
    currentTallest = $el.height(); 
    rowDivs.push($el); 

    } else { 

    // another div on the current row. Add it to the list and check if it's taller 
    rowDivs.push($el); 
    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 

    } 

    // do the last row 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
    rowDivs[currentDiv].height(currentTallest); 
    } 

});​