html - 特定の高さの次の列に li を入れる

Question

私はワードプレスのウェブサイトでナビゲーションメニューに取り組んでいます。css と html の背景画像は常に上に揃えてください。

この投稿は成功しましたが、特定の高さに達した後、ul のリスト項目 (li) を新しい列にプッシュしたいと考えています。さらに説明すると、サブメニューの背景画像の高さが固定されています。サブメニューが背景の高さに達すると、次の列にプッシュする必要があります。

このようにして、サブメニューは常に背景画像内に表示されます。

ありがとう

score 3 · Accepted Answer

css で特定のカウントを追加して試すことができます。基本的に、特定の量のアイテムがあり、その量を超えた場合は次の列にプッシュされます。

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

ただし、これは普遍的にサポートされているわけではなく、問題のあるブラウザーは無視するだけであることを警告する必要があります。そのためには、何か別のものを考え出さなければなりません。

別の方法は、おそらく次のように、全体的な div に特定の高さを設定することです。

ul
{
    height: 100px;
    border: 1px solid #f00;
}

li
{
     float: left;
     border: 1px solid #0f0;
     width: 50px;
}

さらに、cssを少しいじっているだけだと思います。あなたにとって最も便利な方法は何かを考えてみてください。

score 0 · Accepted Answer

最も簡単な方法は、要素に設定inline-blockすることだと思います。li

幅/高さが 100% ではないと定義されている限り、機能するはずです。

score 0 · Accepted Answer

これは、css プロパティの column-count を使用して行うことができます。

 column-count:2;

li または div のプロパティといくつかの高さ、

次のリンクで詳細を説明します

3 に答える 3