change value display
of <li>
from default list-item
to inline-block
+ width:99%;
, and <li>
s won't break anymore through column
s.
if you still want the bullet , use a pseudo element to fake it.
質問
I am having a strict two levels ul li structure. I want to display it in 2 columns as the tree is very long and want to occupy the right portion for better user friendliness. So far I have achieved this using css3 property column-count
. I am getting the expected result but the problem is it is breaking a subtree which I am unable to prevent. Is there a css property which will work in combination with column-count or independently and allow me to split my tree in 2 column without breaking a sub-tree.
HTML:
<div id="parent">
<ul>
<li>asd
<ul>
<li>lmn</li>
...
</ul>
</li>
<li>xyz
<ul>
<li>pqr</li>
...
</ul>
</li>
...
</ul>
</div>
CSS:
#parent {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2
}
So far my jsfiddle looks like: http://jsfiddle.net/7WwK7/1/
解決
change value display
of <li>
from default list-item
to inline-block
+ width:99%;
, and <li>
s won't break anymore through column
s.
if you still want the bullet , use a pseudo element to fake it.