1

助けてください、

ヘッダーメニュー/ナビゲーションリンクを縦に揃えたい。見る：

http://hyindia.com/demo/myoffshore/index.html

ここでコードを参照してください。

nav ul { list-style-type:none; padding:0px; margin:0px; float:left; width:100%;}
nav ul li { float:left; width:119px; height:66px;}
nav ul li a { 
 float:left;
 width:119px;
 height:66px;
 font:bold 15px 'Myriad Pro';
 color:#fff;
 text-shadow:1px 1px #1f1f1f;
 text-align:center;
}

<nav>
<ul>
    <li><a href="#" class="nav1">HOME</a></li>
    <li><a href="#" class="nav2">HEALTH INSURANCE</a></li>
    <li><a href="#" class="nav3">LIFE INSURANCE</a></li>
    <li><a href="#" class="nav4">OVERSEAS MORTGAGES</a></li>
    <li><a href="#" class="nav5">ESTATE PLANNING</a></li>
    <li><a href="#" class="nav6">BANKING</a></li>
    <li><a href="#" class="nav7">WEALTH MANAGEMENT</a></li>
    <li><a href="#" class="nav8">QROPS</a></li>
</ul>

4

2 に答える 2

1

一部のナビゲーション アイテムには複数の行にまたがるテキストがあるため、従来の line-height-trick (行の高さを高さに等しく設定する) を使用することはできません。

代わりに、メニュー スタイルを使用するように変更することをお勧めしますdisplay: table/table-row/table-cell。

必要なことは、navスタイリング全体を次のように変更することです。

nav {
    display: table;
    width: 100%;
}

    nav ul {
        display: table-row;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        nav ul li {
            display: table-cell;
            vertical-align: middle;
        }

            nav ul li a {
                display: block;
                padding: 5px 10px;
            }

すべての浮動小数点数と幅 + 高さ (a代わりにパディングを使用) などを削除します (上記のものが必要です)。

また、実際の背景スタイルを sからasに移動する必要があります。これは、 s の高さが等しくなくなるためです (ただし、s は同じになります)。liali

于 2012-04-10T12:33:30.410 に答える