html - CSS3 lista de múltiples columnas

wordpress css-multicolumn-layout

Question

He estado usando CSS3 en varias columnas para algunos sitios de Wordpress ahora y una cosa que encuentro excepcional, pero todavía algo que quiero saber cómo solucionarlo es que si pongo una lista (con subelementos) en las columnas que ganó. No mantengas la estructura de la lista.

Para aclararme este es el HTML:

<div>
<ul>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul>
   </li>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul
   </li>
</ul>
</div>

Y el CSS sería:

div{
-webkit-column-count:3;   
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;   
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}

Y esto es lo que obtienes:

Esto es bueno porque hace posible en Wordpress mostrar menús como este. Pero una cosa que me molesta es que coloca los elementos de la Sub-lista en la siguiente columna, mientras que el elemento primario de ese elemento está en la columna anterior.

¿Se puede arreglar esto?

Antes de que alguien diga: ¿por qué no hace varias listas y crea sus propias columnas (esta fue la sugerencia cuando le hice la pregunta de cómo hacerlo)? Esto es para un menú dinámico de Wordpress, por lo que no tengo control sobre cuántos elementos hay. en el menu

Answer 1

Haciendo que su padre <li> display: inline-block; parece "arreglar" esto:

Aquí hay una demostración http://jsfiddle.net/DczVL/1/

ul {
    list-style: none;
    margin:0;
    padding:0;
}
ul > li {
    display: inline-block;
    width: 100%;
}
ul > li > ul >li {
    color: red;
}
div {
    -webkit-column-count:3;
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}

<div>
    <ul>
        <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
        <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
         <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
    </ul>
</div>