css - UL リストをラップする方法 - css を使用して新しい行に LI を配置する

Question

下の画像では、リストが画面の外に出ています。ULの幅をブロックする必要があります。幅は適用されますが、ul 幅からはみ出します。現在使用されている CSS:

.menu ul{
width:100%;
max-width:100%;
}

Answer 1

これを試して

.menu li {
    display: inline-block;
}

まともなサポートとここに素晴らしいまとめがあります.

ある場合

• margin-left幅を に設定するの100%ではなく、100% - margin-left-value
• padding-left使用するbox-sizing: border-box

古いブラウザーをサポートする必要がない場合や、ポリフィルの読み込みに問題がない場合は、フレックスボックス モデルが役に立ちます。

Answer 2

表示：インライン; または表示：インラインブロック;

両方とも動作します。