CSS - 對齊導航欄圖像和文字

Question

我有一個菜單（如下圖所示），我試圖正確對齊文本與圖像（即[img] [文本]）以及「拉伸」整個內容適合所有的寬度。

圖片：

HTML：

<div id="menu"> 
     <ul>           
      <li><a class="current" href="home.html" title="">HOME</a></li> 
      <li><a href="services.html" title="">TRANSPORT</a></li> 
      <li><a href="#" title="">ACCOMODATION</a></li> 
      <li><a href="#" title="">DEALS</a></li> 
      <li><a href="contact.html" title="">CONTACT</a></li> 
     </ul> 
</div> 

CSS：

#menu{ 
    width:900px; 
    height: 50px; 
    clear:both; 
    background-color: #f7951e; 
    font-family: 'Exo 2', sans-serif; 
    text-align: center; 

} 
#menu ul{ 
    font-family: 'Exo 2', sans-serif; 
    list-style:none; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    display:block; 
    float: left; 
    width: auto; 
} 
#menu ul li{ 
    font-family: 'Exo 2', sans-serif; 
    list-style:none; 
    display:inline; 
    width:auto; 
    height:50px; 
    line-height:42px; 
    font-size:18px; 
} 
#menu ul li a{ 
    font-family: 'Exo 2', sans-serif; 
    font-size: 18px; 
    height: auto; 
    width: auto; 
    float:next; 
    text-decoration: none; 
    color:#fff; 
    padding-left: 40px; 
    padding-right: 10px; 
} 
#menu ul li a:hover{ 
    height:auto; 
    width: auto; 
    text-decoration:none; 
    color: #fff; 
} 
#menu ul li a.current{ 
    height:auto; 
    width: auto; 
    text-decoration:none; 
    color: #fff; 
} 

#menu ul li:nth-of-type(1){ 

    background:url(./images/iconza/house_32x32.png) no-repeat; 
    float: start; 
    padding-top: 5px; 
    padding-bottom: 10px; 
} 

#menu ul li:nth-of-type(2){ 

    background:url(./images/iconza/Car.png) no-repeat; 
    float: start; 
    padding-top: 5px; 
    padding-bottom: 10px; 

} 

#menu ul li:nth-of-type(3){ 

    background:url(./images/iconza/house.png) no-repeat; 
    float: start; 
    padding-top: 5px; 
    padding-bottom: 10px; 
} 

#menu ul li:nth-of-type(4){ 

    background:url(./images/iconza/offer.png) no-repeat; 
    float: start; 
    padding-top: 5px; 
    padding-bottom: 10px; 
} 
#menu ul li:nth-of-type(5){ 

    background:url(./images/iconza/mail_32x32.png) no-repeat; 
    float: start; 
    padding-top: 5px; 
    padding-bottom: 10px; 
} 

Answer 1

我會建議在#menu ul li，而不是float: left;使用display: table-cell;（我從一本書學到了關於響應式設計），並將背景圖像轉換爲html格式，如imgs：

看到我LIVE DEMO

下面是修改HTML：

<div id="menu"> 
    <ul>           
    <li><a class="current" href="home.html" title=""><img src=""><span>HOME</span></a</li> 
    <li><a href="services.html" title=""><img src=""><span>TRANSPORT</span></a></li> 
    <li><a href="#" title=""><img src=""><span>ACCOMODATION</span></a></li> 
    <li><a href="#" title=""><img src=""><span>DEALS</span></a></li> 
    <li><a href="contact.html" title=""><img src=""><span>CONTACT</span></a></li> 
    </ul> 
</div> 

和CSS：

#menu{ 
    width:900px; 
    height: 50px; 
    background-color: #f7951e; 
    font-family: 'Exo 2', sans-serif; 
    text-align: center; 
    display: table; 

} 
#menu ul{ 
    font-family: 'Exo 2', sans-serif; 
    display:table-row; 

} 
#menu ul li{ 
    font-family: 'Exo 2', sans-serif; 
    list-style:none; 
    display:table-cell; 
    font-size:18px; 
    vertical-align: middle; 
} 
#menu ul li a{ 
    font-family: 'Exo 2', sans-serif; 
    text-decoration: none; 
    color:#fff; 
} 

#menu ul li span { 
    vertical-align: middle; 
    margin-left: 5px; 
} 
#menu ul li img{ 
    vertical-align: middle; 
} 
#menu ul li a:hover{ 
    color: #ababab; 
} 
#menu ul li a.current{ 
    text-decoration:underline; 
} 

#menu ul li:first-child { 
    text-align: left; 
    padding-left: 10px; 
} 

#menu ul li:last-child { 
    text-align: right; 
    padding-right: 10px; 
}