html - 背景图片被裁掉

Question

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

如果有人能帮我解决问题，我会很高兴!

Answer 1

您需要设置图片所在标签的高度!不幸的是，内联元素不允许您设置它们的高度，因此您需要更改 display属性(property)也是如此。对于初学者，您需要添加:

.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 使文本垂直居中到图像。我还在底部添加了一些填充以稍微抬高文本:

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