Question

我有严格的两级ul li结构。我希望将它显示在2列中，因为树很长并且想要占据正确的部分以便更好地方便用户使用。到目前为止，我已经使用css3属性column-count实现了这一目标。我得到了预期的结果，但问题是它打破了一个我无法阻止的子树。是否有一个css属性可以与列数一起使用或独立使用，并允许我将我的树拆分为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

将display的值<li>从默认list-item更改为inline-block + width:99%;，<li> s将不再中断{ {1}}秒。

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

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

在2列打破ul li树

1 个答案: