Я использую многоколоночный CSS3 для нескольких сайтов Wordpress, и одна вещь, которую я нахожу исключительной, но все же я хочу знать, как исправить, это то, что если я поместил список (с подпунктами) в столбцы, которые он выиграл не сохранить структуру списка
Чтобы было понятно, это 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>
И CSS будет:
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;
}
И вот что вы получаете:
Это хорошо, потому что это позволяет в Wordpress отображать меню, подобные этому. Но одна вещь, которая меня беспокоит, заключается в том, что он помещает элементы подсписка в следующий столбец, в то время как родитель этого элемента находится в предыдущем столбце.
Это поправимо?
Прежде чем кто-либо скажет: почему бы вам просто не создать несколько списков и не создать свои собственные столбцы (это было предложение, когда я задал вопрос, как это сделать), это для динамического меню Wordpress, поэтому я не могу контролировать, сколько элементов в меню.
