0

次のようなネストされたリストがあります。

<ul>
    <li>
      <a href="#" class="">Parent Links</a>
      <!-- Flyoutwrapper is what expands when users hover over the parent links, the contents of flyoutwrapper will be changing, so I can not set a min-width or width -->
      <div class="flyoutWrapper">
        <ul class="flyout fourCol">
          <li></li>
          <li></li>
        </ul>
      </div>
    </li>
</ul>

class="flyout fourCol" 内のすべての li を隣り合わせにフロートさせたい。列で。しかし、「flyout fourCol」に ~900px の最小幅を設定しない限り、各 li 要素は前の要素の下に折りたたまれます。

これは、ドロップダウンを次のように表示したいものです。

#nav .flyout.fourCol { min-width:900px; }

http://jsfiddle.net/t7esz/ (これは動作します)

#nav .flyout.fourCol { width:auto; }

http://jsfiddle.net/sumcA/2/ (これは機能しません!)

4

1 に答える 1

1

あなたの場合、はい、あなたの.flyoutサブメニューはその親から幅を継承しているので、あなたの「結婚式」liは幅が。ではありません900px。divから幅を削除flyoutして「結婚式」の親に追加するとli、サブメニューは同じ幅を継承するため、明示的に幅を指定する必要はありません。したがって、答えは「はい」です。サブメニューの幅に合わせるには、サブメニューに幅を追加する必要があります。そうしないと、親から継承されます。

于 2012-04-12T14:09:55.107 に答える