web-dev-qa-db-ja.com

CSS3複数列リスト

私はいくつかのWordpressサイトでCSS3マルチカラムを使用していますが、私が見つけられないものは1つだけありますが、修正する方法を知りたいのは、リスト（サブアイテム）リストの構造を維持しない列

私自身を明確にするために、これは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;
}

そして、これはあなたが得るものです：

enter image description here

Wordpressでメニューを次のように表示できるようになるので、これはいいです。しかし、私を悩ませているのは、サブリスト項目を次の列に配置し、その親がアイテムは前の列にあります。

これは修正可能ですか？

誰もが言う前に：複数のリストを作成して独自の列を作成してみませんか（これは、これを行う方法を質問したときの提案でした）これは動的Wordpressメニューなので、メニューにあるアイテムの数を制御できません。

htmlwordpresscsscss-multicolumn-layout
16
Nick Hooked

親を作る<li>display: inline-block;はこれを「修正」しているようです：

デモはこちら 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>
24
Nico O