1

ナビゲーションとして使用される水平リストがあり、リストのテキストの上に画像/アイコンを配置します。

ただし、各リスト項目の中央に画像を配置することはできません。

画像はまったく同じサイズです。

HTML:

<div id="nav">

<ul>
    <li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COMPETE</a></li>
    <li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCORE</a></li>
    <li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHOP</a></li>
    <li><img src="images/morenav.png" alt="more" /><a href="index.php">MORE</a></li>
</ul>
</div>
<div class="clear">
</div>

CSS:

#nav {
    background:#ffffff;
    width:100%;
    margin-top:-2em;

}


#nav ul {
    list-style-type:none;
}

#nav li {
    display:inline;
    float:left;
    width:2%;
    margin-left:10%;
    margin-right:10%;
    margin-top:5%;
}

#nav a {
    display:block;
    width:20%;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}
4

2 に答える 2

3

text-align:center;に追加#nav li

于 2013-01-01T16:59:23.917 に答える
1

あなたの間違いはあなたがリストアイテムを与えた2％の幅です。これは幅を制限します

http://jsfiddle.net/bukfixart/Z9uc7/

この方法で試してください：

#nav li {
display:inline;
float:left;
/*width:2%;*/
margin-left:10%;
margin-right:10%;
margin-top:5%;

text-align:center;
}
于 2013-01-01T17:27:00.040 に答える