読者です 読者をやめる 読者になる 読者になる

カメラとか、ノートとか。

X-E2が好きなおっさんのブログ

ul li style background float

リストを横並びにしてマークは画像でマウスオーバー。
リスト毎に長さが変わるのでwidthはautoがいいのかな。
意外とわからん。


<div id="linklist">
<ul>
<li><a href="#">リスト1</a>
</li><li><a href="#">リスト2</a>
</li><li><a href="#">リスト3は長いテキストで</a></li>
</ul>
</div>



#linklist{
width: 350px;
height:20px;
margin: 0 auto;
background: #ccc;
}

ul{
list-style:
none;
}

li{
float :left;
}

li a{
text-decoration: none;
font-size: 12px;
display: block;
float: left;
width: auto;
height: 20px;
margin: 0 5px 0 5px;
padding: 4px 0 0 2em;
background: url(../img/画像1.gif) no-repeat top left;
}

li a:hover{
background: url(../img/画像2.gif) no-repeat top left;
}