被截斷的背景圖片

正如您所見，我的導航欄有問題。圖像被切斷（與文本保持一致），我無法弄清楚如何解決它。

  <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

被截斷的背景圖片

回答

相關問題