Question

如您所见，我的导航栏出现问题。图像被切断（与文本保持一致），我无法弄清楚如何修复它。

            <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属性。对于初学者，您需要添加：

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

Answer 2

添加padding-bottom，它应该可以使用！我尝试了<em>然后就出现了。然后添加margin-bottom以展开

背景图片被切断

2 个答案: