ul li style background float

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

<div id="linklist">

<ul>

<li><a href="#">リスト１</a>

</li><li><a href="#">リスト２</a>

</li><li><a href="#">リスト３は長いテキストで</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/画像１.gif) no-repeat top left;

}
li a:hover{

background: url(../img/画像２.gif) no-repeat top left;

}