1

http://mohrdevelopment.com

ご覧のとおり、ナビゲーションバーに問題があります。画像が切り取られており（テキストと一致している）、修正方法がわかりません。

            <ul class="navigation">
            <li class="navbar"><a href="index.html" class="navbarlink" ><em class="home"/><b>Home</b></a></li>
            <li class="navbar"><a href="second.html" class="navbarlink"><em class="photos"/><b>Photos</b></a></li>
            <li class="navbar"><a href="index.html" class="navbarlink"><em class="projects"/><b>Projects</b></a></li>
            <li class="navbar"><a href="index.html" class="navbarlink"><em class="about"/><b>About</b></a></li>
            <li class="navbar"><a href="index.html" class="navbarlink"><em class="contact"/><b>Contact</b></a></li>
        </ul>

CSS：

     .navigation {
        background:#1841c8 url(Navigation/Navigation/nav_background.png);
        height:40px;
        margin-bottom:0px;
        display:block;
    }

    .navbar {
        display:inline-block;
        line-height: 40px;
        margin-right:40px;
        }

    .navigation .navbar .navbarlink{
        color:#FFFFFF;
        padding: 11px 5px 11px;
    }

    .navigation .navbar .navbarlink b{
        padding-left:40px;
        padding-right:5px;
    }

    .navigation .navbar .navbarlink:hover{
        color:#00CCFF;
        background: url(Navigation/Navigation/nav_hover.png);
        text-decoration:none;
        padding: 11px 5px 11px;
    }



    /*Navigation bar icons*/
    .navigation .navbar .navbarlink em.home{
        background-image: url(Navigation/Icon_images/home.png);
        background-repeat: no-repeat;

    }

    .navigation .navbar .navbarlink em.photos{
        background-image: url(Navigation/Icon_images/Photo.png);
        background-repeat: no-repeat;
    }


    .navigation .navbar .navbarlink em.projects{
        background-image: url(Navigation/Icon_images/projects.png);
        background-repeat: no-repeat;
    }


    .navigation .navbar .navbarlink em.about{
        background-image: url(Navigation/Icon_images/about.png);
        background-repeat: no-repeat;
    }

    .navigation .navbar .navbarlink em.contact{
        background-image: url(Navigation/Icon_images/Contact.png);
        background-repeat: no-repeat;
    }

誰かが私がそれをトラブルシューティングするのを手伝ってくれるなら幸せです！

4

2 に答える 2

1

画像が入っているタグの高さを設定する必要があります! 残念ながら、インライン要素では高さを設定できないため、displayプロパティも変更する必要があります。まず、以下を追加します。

.navigation .navbar .navbarlink em {
    height: 32px;
    display: inline-block;
}

コードからすべてのタグを実際に削除することができます (とにかく<b>使用するべきではありません)。代わりに、パディングを.<b>em

.navigation .navbar .navbarlink em {
    font-weight: bold; /* emulate the <b> tag */
    height: 32px;
    padding: 0 5px 0 40px; /* padding: top right bottom left */
    display: inline-block;
}

あなたの人生を少し楽にすることがいくつかあります。以下を追加することで、ナビゲーションバーの画像を垂直方向に中央揃えにすることができますvertical-align: middle。

.navigation .navbar .navbarlink em {
    font-weight: bold;
    height: 32px;
    padding: 0 5px 0 40px;
    vertical-align: middle;
    display: inline-block;
}

また、画像に a を追加することで、テキストを垂直方向に中央揃えにすることができますbackground-position。また、テキストを少し上げるために、下部にパディングを追加しました。

.navigation .navbar .navbarlink em {
    background-position: 0 50%;
    font-weight: bold;
    height: 32px;
    padding: 0 5px 6px 40px;
    vertical-align: middle;
    display: inline-block;
}
于 2012-07-18T17:52:51.513 に答える
0

a を追加するpadding-bottomと、動作するはずです! を試着したところ、<em>表示されました。次に、を追加し margin-bottomて展開します

于 2012-07-18T17:47:43.743 に答える