0

だから、これがスキニーです...

としてリストがあるページがありますdisplay:table-cell。ブラウザーの幅が変更されると、リストの内容 (アンカー) が 2 行に折り返される場合があります。問題は、2 行に折り返されないアンカーの高さが 100% に保たれないことです。

CSS...

.home .pushes ul {display:table;}
.home .pushes ul li {display:table-cell; vertical-align:middle; width:25%; background-color:#e5a015; color:#ffffff;}
.home .pushes ul li a {display:block; padding:4em 0; padding:4rem 0;}

したがって、 の高さは<li>の高さとパディングによって決定する必要があります<a>。ただし、 であるため<display:table-cell>、高さは最も高い によって決まり<a>ます。

わかりましたので、設定するだけですa {height:100%;}。しかし、アンカーはパディングを保持しません。だから、ただ設定li {height:160px;}するか何か。ただし、アンカーは垂直方向の中央にはありません。だから、設定するだけですli {line-height:160px;}。しかし、アンカーが 2 行に折り返されると巨大になります。

それで、男は何をするのですか？

できli {display:inline-block;}ました。しかし、すべてのボックスを同じ高さにしたいです。

JJ

編集...

後世のためにHTMLが含まれています...

<ul>
    <li>bleh</li>
    <li>bleh</li>
</ul>

JJ

編集 2...

アンカーの背景色は、親の高さいっぱいに成長していないものです。

下の 4 つのボックスに注意してください

画像アップできるとは知りませんでした。ヒントをありがとう。

JJ

4

1 に答える 1

3

この問題を修正する最善の方法は、position: relative と position: absolute を使用することです。

例：

li {
  position: relative;
}

li a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

ただし、li が「display: table-cell;」を使用しているため、上記は機能しません。および position: relative はテーブル セルに対して定義されていません (参照: TD 内で位置相対/絶対位置を使用しますか? )。

したがって、唯一の選択肢は、Javascript を使用してこれを行うことです。多くの解決策がありますが、ここではその 1 つを示します。

ウィンドウのサイズがいつ変更されるかを追跡するには、jQuery のサイズ変更メソッド ( http://api.jquery.com/resize/ ) を使用します。ウィンドウのサイズが変更されたら、アンカー タグのパディングを変更して、スペース全体をカバーし続けるようにします。

于 2012-10-08T02:38:20.253 に答える