1

table/table-cell タグを含む水平メニューがあります。

.menu {
  display: table;
  width: 100%;
}

.menu li {
  display: table-cell;
}

<!doctype html>
<html>
  <body>
    <div style="width: 960px">
      <ul class="menu">
       <li><span>Selected Menu Item</span></li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
      </ul>
    </div>
  </body>
</html>

これは正常に機能していますが、次のようなサブメニューもあります

<ul class="menu">
  <li><span>Selected Menu Item</span></li>
  <li><a href="#item">Another Item</a>
    <ul class="submenu">
      <li><a href="#sub">Submenu Item</a></li>
      <li><a href="#sub">Submenu Item</a></li>
    </ul>
  </li>
 </ul>

通常は、第 1 レベルの liposition: relativeと第 2 レベルの ulを作成position: absoluteし、li 要素に指定したのと同じサイズにします。しかし、この場合、私はliの固定を持っていないので、これを試しました:

.menu li {
  position: relative;
}

ul.submenu {
  position: absolute;
  width: 100%;
}

しかし、私が予想するように、親 (li) の 100% 幅に拡大するのではなく、指定された最も近い要素の幅を取得します (この場合、幅 960px の div だと思いますが、それよりも大きい可能性もあります)。 ）。

私の質問は次のとおりです。JavaScript にフォールバックせずに、第 2 レベルの ul 要素をその親である表セル スタイルの li の幅に拡張することは可能ですか?

IE <= 7 のような無効なブラウザー用のスクリプトを作成する必要があることは承知しています。実行例を次に示します: http://jsfiddle.net/hy73d/

編集＃1：これが実際にwebkit-browsersとoperaで機能することが私の注意を喚起しました。本当の質問は、gecko の解決策はあるのでしょうか?

4

2 に答える 2

3

Firefox では、 table-cells に相対位置を指定できません。あなたの内部で別の要素を使用tdして、相対的に配置します。

<ul class="menu">
  <li><span>Selected Menu Item</span></li>
  <li><a href="#item">Another Item with Sub</a>
    <div>
      <ul class="submenu">
        <li><a href="#sub">Submenu Item</a></li>
        <li><a href="#sub">Submenu Item</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#item">Another Item</a></li>
  <li><a href="#item">Another Item</a></li>
</ul>

もちろん、新しい div には CSS ルールのみを適用します。

.menu li {
  display: table-cell;
}
.menu li div {
  position: relative;
  background: #444;
}

これは、すべてのブラウザーでより適切に機能します。

于 2012-07-06T09:20:48.967 に答える
0

あなたのコードを操作して、ulが拡大している理由を理解しました。これは、ulが体に絶対に配置され、幅が100％であることが体の幅と一致しているためです。クロムの動作よりも論理的だと思います。ここで、位置を相対的に変更すると、コンテナー ul が別の ul を保持していることを認識するため、li 要素が展開されてそれをカバーします。 http://jsbin.com/iwesoc/2/edit#preview を見てください。他の li の高さを 0 に設定するだけです。それらは ul の高さを継承しているためです。したがって、私が得ることができる最も近いのは、このソリューションhttp://jsbin.com/iwesoc/2/edit#previewです。たぶん、それはいくつかの用途があります。

于 2012-07-06T09:52:49.420 に答える