初心者です 画像横に文字を入れたい ｃｓｓ

質問

web制作を始めたばかりの初心者です。
画像右側に文字を入れたいのですが、うまくいきません。
本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。
どうぞご教示ください。
html
<ul>
　　　　<li><a href="index.htm"><img src="画像"width=""height=""></a></li>
　　　　<div class="text">文字列</div>
<li><a href="index.htm"><img src="画像" width=""height=""></a></li>
　　 <div class="text">文字列</text>

</ul>
</div>

css
.site ul {margin: 0;
padding: 0;
list-style: none}

.site li a {display: block;
padding: 5px;
font-size: 14px;
text-decoration: none}

.site li a img {border: none
}

.site a:after {content: "";
display: block;
clear: both}

.site img {float: left;
width: 250px}

.site .text {float: none;
width: auto;
margin-left: 60px;
padding-left: 15px;
color: #000000;
font-size: 18px}

回答No.2

chie65536（@chie65535） · ベストアンサー

＞<li><a href="index.htm"><img src="画像"width=""height=""></a></li>
＞<div class="text">文字列</div>
＞<li><a href="index.htm"><img src="画像" width=""height=""></a></li>
＞<div class="text">文字列</text>

「</li>」でタグを閉じたら、その「リスト項目」はそれで終わりになってしまう。

以下のように、文字列は「<li>と</li>の内側」に書かないといけない。

<li><a href="index.htm"><img src="画像"width=""height=""></a><div class="text">文字列</div></li>
<li><a href="index.htm"><img src="画像" width=""height=""></a><div class="text">文字列</text></li>

回答No.1

t_ohta

ブロックレベル要素は、基本的にそれだけで一段を構成するので上下で改行されます。

単純に横に並べるだけなら
<li><a href="index.htm"><img src="画像"width=""height=""></a>文字列</li>
でいいはずです。
また、<ul>の直下に<div>が居るのはおかしな記述です。<ul>の子要素は<li>か<script>である必要が有ります。