16

私は現在、いくつかの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;
}

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

ここに画像の説明を入力

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

これは修正可能ですか？

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

4

1 に答える 1

24

あなたの親を作ること<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>

于 2014-03-20T15:07:43.330 に答える