0

機能的な CSS ナビゲーション バーを作成しましたが、CSS のいくつかの副作用を除き

ます。各リスト ブロックのテキストを垂直方向に中央揃えにしようとしていますが、機能しvertical-align: middleていませんでした。代わりに、私は を使用していますが、これは残りのリスト要素padding-top: 13pxなしでパディングされた領域をレンダリングし、リンクのスタイリングもパディングされた領域に拡張されません! （パディングの下の領域にのみ影響します）では、これらのCSSの問題なしに、リスト要素のテキストを垂直方向に中央揃えするにはどうすればよいですか? 関連する CSS は次のとおりです。background-colordisplay: inline blocka:hover





/* header section */
#header
{
    padding-left: 115px;
    margin-bottom: 10px;
}
    #main-menu
    {
        list-style-type: none;
    }
    #main-menu li
    {
        border: 1px solid black;
        text-align: center;
        padding-top: 13px;

        color: #666;
        font-family: "Lucida Console";
        font-variant: small-caps;
        letter-spacing: 2px;

        /* for  block layout */
            display: -moz-inline-box; /* for firefox */
            display: inline-block;

        width: 153px;
        height: 32px;
    }
    #main-menu a:link, a:visited
    {
        display: -moz-inline-box; /* for firefox */
        display: inline-block;

        width: 100%;
        height: 100%;
        background-color: #eee;
    }
    #main-menu a:hover, a:active
    {
        background-color: #bbb;
    }<br /><br />

...そして、関連する HTML は次のとおりです。

        <!-- header section -->
        <div id = "header">
            <ul id = "main-menu">
                <!-- no spaces between list elements when all on the same line! -->
                <li><a href = "home.html" title = "home">home</a></li><li><a href = "about.html" title = "about">about</a></li><li><a href = "cart.html" title = "shopping cart">cart</a></li><li><a href = "login.html" title = "log in">login</a></li><li><a href = "createAccount.html" title = "create a new account">sign up</a></li>
            </ul>

        </div> <!-- end of header section -->
4

3 に答える 3

3

私が変更したもの：

  • ブロック要素として表示するようにリンクを変更しました。
  • li要素の上部にあるパディングを削除しました。
  • そのパディングの高さをli要素の高さに追加しました。
  • line-heightをli要素の高さに設定します。
  • いくつかのフォーマット

http://jsfiddle.net/gtr053/7yrX7/

于 2012-04-08T19:34:41.627 に答える
1

線の高さを設定してみてください

line-height: 13px;
于 2012-04-08T19:34:52.433 に答える
1

私は何も知りませんが、今これを使用しましたが、うまくいきます

一般的なスタイリングのクイック CSS に入力されました

li {
    display:inline;
    padding: 0px 50px;
}

最初の px はメニュー項目を下に移動し、2 番目の px はそれらを広げます。

于 2016-01-17T12:15:06.163 に答える