在 2 列中破坏 ul li 树

Question

我有一个严格的两级 ul li 结构。我想将它显示在 2 列中，因为树很长并且想要占据正确的部分以提高用户友好性。到目前为止，我已经使用 css3 属性 column-count 实现了这一点。我得到了预期的结果，但问题是它破坏了我无法阻止的子树。是否有一个 css 属性可以与 column-count 结合使用或独立使用，并允许我将树分成 2 列而不破坏子树。

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
}

到目前为止，我的 jsfiddle 看起来像：http://jsfiddle.net/7WwK7/1/

Answer 1

将<li> 的值display 从默认list-item 更改为inline-block + width:99%;，并且<li>s 将不再突破columns。

如果你仍然想要子弹，使用伪元素来伪造它。

http://jsfiddle.net/7WwK7/6/