I've been using CSS3 multi-column for a few Wordpress sites now and one thing that I find excepteble but still something I want to know how to fix is that if I put a list(with sub items) in the collumns that it won't keep the structure of the list
To make myself clear this is the 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>
And the CSS would be:
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;
}
And this is what you get:
This is nice because it makes it possible in Wordpress to show menu's like this. But one thing that bugs me is that it places the Sub-list-items in the next column while the parent of that item is in the previous column.
Is this fixable?
Before anyone says: why don't you just make multiple lists and make your own columns(this was the suggestion when I asked the question how to do this) this is for a dynamic Wordpress menu so I have no controll over how many items are in the menu.
CSS3 Multiple Columns PropertiesSpecifies a straight line or rule, to be drawn between each column. Specifies the color of the rule between columns. Specifies the style of the rule between columns.
This is the simplest way to do it. CSS only. add width to the ul element. add display:inline-block and width of the new column (should be less than half of the ul width).
Making your parent <li>
display: inline-block;
seems to "fix" this:
Here is a demo 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With