被截断的背景图片

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

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

会很高兴，如果有人能帮助我解决它！

来源

2012-07-18 Jonas Pedersen

可能要删除首都关你的形象的名字。 – 2012-07-18 17:53:40

不要以为你的母亲会对你的侧边栏很满意。 – 2012-07-18 18:03:03

lol：D可能不是！ – 2012-07-18 18:57:29

您需要设置图片所在标签的高度！不幸的是，内联元素不允许你设置它们的高度，所以你也需要改变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; 
}

来源

2012-07-18 17:52:51 Wex

很好的评论！非常好的解释和工作就像一个魅力！非常感谢。 – 2012-07-18 17:59:00

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

来源

2012-07-18 17:47:43 dccarmo

被截断的背景图片

回答

相关问题