如何使用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

您是否在<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 2

试试这个 - 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 3

以下是演示：http://jsbin.com/uruqur/1/edit

基本样式是

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


#categoryWrapper li { 
 display: inline-block;
}

然后，您可以添加所需的填充/颜色以匹配您的设计。

Answer 4

你可以这样做：

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