如何實現CSS和HTML

Question

我想實現的導航系統下面這個導航：

我試着開始用一個簡單的HTML和CSS結構像這樣的，但不能成功至今。

 <div id="categoryWrapper"> 
      <ul> 
       <li><a href="#"><img src="/assets/sample.png"><span>Diyet</span></a></li> 
       <li><a href="#"><img src="/assets/sample.png"><span>Diyet</span></a></li> 
       <li><a href="#"><img src="/assets/sample.png"><span>Diyet</span></a></li> 
      </ul> 
    </div> 


#header #center #categoryWrapper ul{ 
    width:300px; 
    margin:0 auto; 
    height: 100%; 

} 

#header #center #categoryWrapper ul li{ 
    display:inline-block; 
    height:54px; 
    list-style-type: none; 
} 

#header #center #categoryWrapper ul li a{ 
    display:inline-block; 
    position:relative; 
} 

#header #center #categoryWrapper ul li a img{ 
    position:absolute; 
    top:-2px; 
} 

#header #center #categoryWrapper ul li span{ 
    display:inline-block; 
    position:relative; 
    top:10px; 
} 

Answer 1

試試這個 - DEMO

#categoryWrapper ul{ 
    width:300px; 
    margin:0 auto; 
    height: 100%; 
    background: #333; 
    padding: 10px 0 5px; 
} 

#categoryWrapper ul li { 
    display:inline-block; 
    height:54px; 
    list-style-type: none; 
    width: 70px; 
    text-align: center; 
} 

#categoryWrapper ul li a{ 
    display:inline-block; 
    color: #fff; 
    text-decoration: none; 
} 

#categoryWrapper ul li span{ 
    display:block; 
    margin-top: 5px; 
} 

Answer 2

您是否嘗試過<div><li>？
像這樣的東西（未測試）：

<ul> 
<li> 

<div id="image"><a href="#"><img src="/assets/sample.png"/></a></div> 
<div class="clear"></div> 
<div id="text"><a href="#">Diyet</a></div> 

</li> 
</ul> 

#image{ 
float:none; 
margin:0 auto; //for center alignment but you have to define the width 
position:relative; 
width:20px; //your img width here 
} 

#text{ 
float:none; 
margin:0 auto; 
position:relative; 
width:30px; //your text width here 
} 

ul, 
li{ 
margin:0; 
padding:0; 
} 

.clear{ 
clear:both; 
} 

讓我們知道它是否有效與否。

Answer 3

你可以這樣做：

 <div id="categoryWrapper"> 
      <ul> 
       <li><a href="#"><img src="/assets/sample.png"><span>Diyet</span></a></li> 
       <li><a href="#"><img src="/assets/sample.png"><span>Diyet</span></a></li> 
       <li><a href="#"><img src="/assets/sample.png"><span>Diyet</span></a></li> 
      </ul> 
    </div> 

#categoryWrapper { 
    position:relative; 
    width:363px; 
    height:59px; 
    padding:0 15px; 
    background-color:#414141; 
} 

#categoryWrapper ul li { 
    display:block; 
    float:left; 
    margin-left:25px; 
    /** for test without image **/ 
    height:50px; 
    width:50px; 
    background-color:red; 
} 

Answer 4

這裏有一個演示：http://jsbin.com/uruqur/1/edit

基本造型

#categoryWrapper ul { 
    margin: 0; 
    padding: 0; /* reset margin/padding */ 
    text-align: center; 
} 


#categoryWrapper li { 
display: inline-block; 
} 

然後，最重要的是，您可以添加任何需要的填充/顏色來匹配您的設計。