1

多数のリンクを含む水平メニューがあり、各リンクには無地の背景色とそれぞれの間に 1 ピクセルの白いギャップが必要です。したがって、テーブル/テーブルセル手法を使用して、それぞれLIを1行に収める必要があるため、それぞれを強制的に縮小/拡張しています。これは、メニューに十分な項目がある場合、またはLI > Aテキストを次の行に折り返す必要があるほど幅の広い項目がある場合にうまく機能します。ただし、すべてがLI > Aコンテンツ/パディングに従って全幅である場合、それぞれのテキストを垂直方向に中央揃えにするためにLI使用しているため、の幅に拡大することを拒否し、display:table-cell は許可しないようですのようなもののためにdisplay:table-cell;vertical-align:middleAwidth:100%

CSSは次のとおりです。

ul {
    display: table;
    padding: 0;
    width: 100%;
}

li {
    background:blue;
    border-right: 1px solid white;
    display: table-cell;
    vertical-align: bottom;
}

li:hover {
    background: red;
}

a {
    vertical-align: middle;
    height: 60px;
    display: table-cell;
    padding: 0 9px;
    color: white;
    text-align: center;
}

そして、ここでそれが実行されています：http://jsfiddle.net/2GUpW/1/

display:table-cellで回避できるように、垂直方向のセンタリングの代替手段を検討する必要があると思いますがA、これを達成する適切な方法があるかどうかはわかりません。Aの高さ/幅全体をカバーする必要があります。そうしないと、クリック可能なリンクでカバーされないLIのセクションができてしまいます。LI

提案をありがとう。

4

1 に答える 1

0

タグの代わりにliで高さを定義し、縦に揃えます。

次の変更を使用します。

    ul {
    display: table;
    padding: 0;
    width: 100%;
}

li {
    background:blue;
    border-right: 1px solid white;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 60px;

}

li:hover {
    background: red;
}

a {

    padding: 0 9px;
    color: white;
    text-align: center;

}

デモ

于 2013-09-26T06:55:04.370 に答える