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;
}

background-position您可以通过在图像中添加 a 来使文本垂直居中。我还在底部添加了一些填充以稍微提高文本：

.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

添加一个padding-bottom，它应该工作！我试了一下<em>，它出现了。然后加一个 margin-bottom展开

于 2012-07-18T17:47:43.743 回答