¿Cómo diseñar elementos de lista como una cuadrícula con CSS y HTML?

Tengo un bloque div que no tiene un ancho fijo.

En el interior, tengo un bloque

  • ..
  • con 11 elementos. Me gustaría que estos elementos

  • se incluyeran dentro de la div, todos con anchos iguales como este:

     ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## 

    Sin embargo, no puedo solucionarlo en absoluto.

    Intenté flotar a izquierda y derecha, pero los 3 elementos centrales no estarán centrados.

    ¿Qué puedo hacer para que esto funcione?

    ¡Gracias!

    El enlace “Bloques en línea” que Jordan publicó es un gran recurso, especialmente cuando se trata de soporte para navegadores antiguos. Para obtener una referencia rápida para que otros usuarios accedan a esta página fuera de google, el css básico para crear una cuadrícula de bloque en línea centrada es:

     ul { margin: 0 auto; text-align: center; } li { display: inline-block; vertical-align: top; } 
  • La solución más simple es usar columnas CSS :

    http://jsfiddle.net/6tD2D/ (prefijos no incluidos)

     ul { columns: 3; } 
    • a
    • b
    • c
    • d
    • e
    • f
    • g
    • h
    • i
    • j
    • k

    Esto igualará las columnas lo mejor que pueda. Sin embargo, si no hay suficientes elementos para ser perfectamente iguales, comenzará a eliminarlos desde la derecha en lugar del centro.

    De acuerdo con esta pregunta de StackOverflow, Inline Blocks puede ser justo lo que necesita.

    Ah, y si aún no lo estás implementando, asegúrate de buscar también en las cuadrículas de CSS . Si no quieres construir una cuadrícula CSS, esta es fantástica.