CSSリストタグ

質問

<div class="test_box_1">
<ul>
<li>テキスト <img src="img/icon.gif" width="20" height="20"></li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

こういった記述をして、リストの横にアイコン画像を出そうとしたのですが、
アイコンを入れると、バランスが崩れます。
（アイコンを入れた下に余白ができてしまったり。）
アイコンの高さを小さくしてみたりといろいろやってみたのですが
できません。
制御する方法はあるのでしょうか？

ちなみに、CSSはこのように記述しています。
.test_box_1 ul {
list-style-type: none;
width: 100%;
margin: 10px 0px 0px 10px;
}
.test_box_1 li {
display: block;
width: 30%;
background-image: url(../images/list_arrow2.gif);
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 10px;
float: left;
}

よろしくお願いします！

回答No.2

leap_day · ベストアンサー

こんにちは

.test_box_1 li img { position:absolute; }

としてみてください

CSSで全部制御しているならimgの width heightもCSSに入れてみては？(1つずつサイズが違うなら逆に面倒になりますけど（－－；）

.test_box_1 li img {
position:absolute;
width:20px;
height:20px;
}

回答No.1

steel_gray

.test_box_1 li img{
vertical-align:top;/*又はbottomとか*/
}
このような記述を追加してみてください。
…画像はテキストのベースライン(例えば y の線が交差する部分)に合わせて配置されますのでこれを調整してやります。
http://www.htmq.com/style/vertical-align.shtml