img{vertical-align: middle;}
ul{
margin: 0;
padding: 0;
}
ul.test01 li{
margin-right: 10px;
list-style: none;
font-size: 12px;
display: inline;
}
img.test01{
vertical-align: middle;
margin-right: 10px;
}
リストマークとテキストを揃えたいときには、画像を「背景画像」として利用するといいのです。
----------------------------------------------
<html>
<head>
<style>
ul {list-style-type:none;
line-height:180%;}
li { list-style-image:url(images/sankaku.gif);}
</style>
</head>
<body>
< ul>
< li>メニュー1</li>
< li>メニュー2</li>
< li>メニュー3</li>
< li>メニュー4</li>
< li>メニュー5</li>
< li>メニュー6</li>
< li>メニュー7</li>
< li>メニュー8</li>
< li>メニュー9</li>
< li>メニュー10</li>
< /ul>
</body>
</html>
------------------------------------------------
位置がずれてしまった状態の記述はこのようになっていました。
li タグに list-style-image として画像が設定されています。
ここで、この代わりに背景画像を設定します。
------------------------------------------------
<style>
ul{list-style-type:none;
line-height:180%;}
li{ background:url(images/sankaku.gif) left no-repeat; } (背景:画像のURL、位置を左、表示はリピートしない)
</style>
img要素に「vertical-align: middle;」 に入れるだけです。