如何使用圖像和標籤（HTML和CSS）創建菜單？

Question

我有一個小問題，我試圖製作一個菜單，圖像和其他項目與標籤，如附圖所示，但它不工作。

下圖顯示了它是如何目前。有錯誤。

我試過這個代碼，但我的 「圖片項目」 不站在旁邊的 「標籤項」：

.sprite-icons { 
 
    background: url(../images/icons/sprite-icons_menu.png) no-repeat top left; 
 
    -webkit-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    width: 33px; height: 30px; 
 
} 
 

 
.sprite-icons.icon_home { 
 
    background-position: 0px 0px; 
 
} 
 
    
 
.icon_home:hover{ 
 
    background-position: -48px 0px; 
 
} 
 
    
 
.sprite-icons.icon_home_active { 
 
    background-position: -48px 0px; 
 
} 
 

 
.sf-menu{ 
 
\t border-bottom: 1px solid black; 
 
\t list-style-type:none; 
 
\t line-height: 1.0; 
 
\t text-align: center; 
 
\t padding: 10px 10px 8px 10px; 
 
\t float: left; 
 
\t width: 99%; 
 
} 
 

 
.sf-menu a{ 
 
\t text-decoration: none; 
 
\t color: #606060; 
 
\t -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; 
 
} 
 

 
.sf-menu a:hover{ 
 
\t color: #ffffff; 
 
\t background-color: #ee1c24; 
 
\t padding: 10px 6px 6px 6px; 
 
\t 
 
} 
 

 
.sf-menu li{ 
 
\t display: inline; 
 
\t padding: 20px; 
 
}

<nav> 
 
    <ul class="sf-menu"> 
 
    <li><a href="" title="Home"> 
 
     <div class="sprite-icons icon_home"> 
 
     </div></a> 
 
    </li> 
 
    <li><a href="">A EMPRESA</a></li> 
 
    <li><a href="">SERVIÇOS</a></li> 
 
    <li><a href="">SISTEMA</a></li> 
 
    <li><a href="">TRABALHE CONOSCO</a></li> 
 
    <li><a href="">CONTATO</a></li> 
 
    </ul> 
 
</nav>

哪有我解決這個問題？

Answer 1

更好的解決方案應該是使用僞元素

:before 

例子：

ul li 
 
{ 
 
    display: inline-block; 
 
} 
 
.icon-tutti:before { 
 
    content: "\e908"; 
 
} 
 

 
span [class^=icon-] { 
 
    font-size: 1.3em; 
 
    margin-right: 10px; 
 
    color: #ff653e; 
 
}

<ul> 
 
\t <li><a href="#"><span class="icon-tutti"></span></a></li> 
 
     <li><a href="#">Second Element</a></li>    
 
     <li><a href="#">Third Element</a></li> 
 

 
</ul>

您也可以使用圖片網址作爲內容，但使用的圖標應該會更好。例如嘗試fontAwesome。