2

クリックサッカーフィッシュメニューを実装する CSS があります。

マークアップ:

<table>
<tr>
<td>
<div class="bodywrapper">
<a class="button" href="#">
   <ul class="menu">
      <li>test test test</li>
      <li>test test test test test test test test test test test test test test test</li>
   </ul>
</a>
</div>
</td>
</tr>
</table>

スタイル:

td{
   width: 80px;
}

.button{
  position: relative;
  display: inline-block;
  background-color: red;
  width: 10px;
  height: 27px;

}

.button:focus .menu, .button:active .menu{
  display: block;
}

.menu{
  display: none;
  position: absolute;
  min-width: 99px;
  max-width: 700px;
  width: auto;
  border: 1px black solid;
  margin-top: 27px;
}

更新、上記は実際には固定のテーブルセル内に含まれています

そしてフィドル：http://jsfiddle.net/dAAXp/3/

問題: このスタイル定義をアプリケーション全体で使用したい。したがって、テキストの長さ<li>は異なります。ただし、私が望む動作は、メニューに最小幅と最大幅があることです。min-widthとmax-widthforを使用してこれを設定しました.menu。しかし、何らかの理由で、 の内容<li>が より小さくてもmax-width、メニューの幅は に制限されますmin-width。

なぜこれが起こっているのか誰か教えてもらえますか？

4

1 に答える 1

4

編集：問題の変更に対する回答については、下部を参照してください（解決策はまったく同じです）

その理由は、A が、UL が展開できる最初の位置指定可能な (相対) ブロックであるためです。アンカーは 10px に制限されているため、含まれている UL はそのアンカー ボックスの寸法に従ってのみ満たすことができます。

アンカーから position:relative を削除し、別の「見えない」コンテナを追加して相対位置を設定すると、UL はその要素のサイズ制限まで拡張できます。固定バージョンについては、このフィドルを参照してください

「英語」では、これはあなたのcssが言うことです：

UL: わかりました。私の幅は相対値でマークされた最初の親の 100% (幅を設定していないため) です...そうです、私の上のアンカーは相対値でマークされているので、私の 100% 幅は 10px です...でもちょっと待ってください-width は 99px なので、それを尊重します。

アップデート：

テーブルの外に移動されたラッパーのフィドルを参照してください

ロジックは最初の場合とまったく同じです。幅が含まれている子の必要な最小/最大幅よりも 100% 以上大きい限り、コンテナであるため、おそらくテーブルに相対位置を設定できます。

補足として、親の幅を必要以上に大きくすることができないポイントに到達したら、絶対配置を調べて、親から要素を分割する必要があります（ただし、今のところはそのままにしておきます）

あなたの中のセマンティックのために：

div ラッパーを追加しました - この動作を任意の親に簡単に適用できます (つまり、必要な最小最大幅 @phpdev よりも幅が広い限り、テーブル/tr/td ですが、親になるポイントに到達した場合はもう一度十分な幅がない場合は、セマンティクスを壊す必要があるかもしれません

于 2012-04-15T06:51:23.733 に答える