html - 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

これを試してください-デモ

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