2

私が取り組んでいるCSSメニューがありますが、親ULの幅を設定せずにリスト項目を左にフロートさせるのに問題があります。

JS フィドルをセットアップしたので、 http://jsfiddle.net/FkK7Y/1/をご覧ください。

「製品メニュー」を見ると、2 つのリンク セット (きれいなピンク色の線で囲まれています) が重なり合っていることがわかります。これらのリンクのセットを並べて表示したいと思います (サブメニューをよりパネル的にします)。ここではインラインブロック (li class="subMenu" を参照)が機能するはずですが、機能しません。

.mainMenu ul.subMenu li.subMenu {
  border:1px solid pink;
  display:inline-block;
  margin-right:10px;
 }

ただし、幅を親 UL に設定すると (class="subMenu" も - コード内で現在コメント アウトされている幅パラメーターがあります。動作を確認するには自由にいじってください)、インライン ブロックが機能しているように見えます。リスト項目に。

.mainMenu ul.subMenu {
  position:absolute;
  left:-9999px;
  top:34px;
  background:#fff;
  padding:0 0 10px 10px;
  z-index:-1;
  border:1px solid #600;
  min-width:100px;
  /*width:200px;*/ }

しかし、各サブメニュー パネルにはこれらのメニューが 1 つ以上含まれている可能性があるため、幅を指定したくありません。

これを回避する方法はありますか？

前もって感謝します！

4

1 に答える 1

1

追加する必要があるのはこれだけです。

.subMenu{
    white-space:nowrap;
}

更新: http://jsfiddle.net/FkK7Y/2/

于 2013-04-05T18:54:03.797 に答える