html - コンテンツに基づくcssストレッチli

Question

ここにこのコードがul.submenu liあり、その内容に従ってストレッチするようにしようとしています。ご覧のとおり、 の 3 番目liには、ul.submenuを伸ばす代わりに非表示にする長いテキストがありますli。

DOM 上のすべての要素のプロパティをさまざまな組み合わせで変更しようとしdisplayましたが、うまくいきません。

私は何を間違っていますか、なぜこれが起こるのですか? 私は何が欠けていますか？

どんな助けでも大歓迎です！:)

Answer 1

現在、ブロック表示と絶対配置のため、テキストはレイアウトにほとんど影響を与えません。

lisdisplay: inline-blockとを指定することで、これを変更できますwhite-space: nowrap。サブメニューが最長の項目に必要な長さである例をフォークしました。

説明

inline-blockinlineおよびblockdisplayの要素プロパティを指定します。inline要素はテキストのように流れ、含まれるテキストから初期レイアウトと寸法を取得する必要があります。ただし、blockpart は、上下のパディングとマージン、クリアなども指定できることを意味します。このセットを使用しても、含まれる要素は依然として絶対的に配置されます (通常、含まれるブロック要素は 100 を埋めるため、ほとんどのテキスト コンテンツは必要な限りフローします)。 % width - 絶対要素、相対要素、および固定要素には当てはまりません)、その本能は、最初の単語の最小幅に折りたたむことです。しかし、 を使用するwhite-space: nowrapと、テキストを必要なだけ拡張することができるため、文全体が尺度として使用されます。

Answer 2

min-width を次のように変更できます。

min-width: 240px;

例を見る