cssで横にテキストとその背景を並べる方法を教えてください。

質問

cssで横にテキストと背景を並べる方法を教えてください。
下記のようなCSS記述と、HTMLタグがあります。

【CSS】
#menu01 {
width:210px;
height:30px;
background-image: url(http://abc.com/img/123.gif);
background-repeat:no-repeat;
font-size:12px;
font-weight:bold;
flort:left;
}

【HTML】
<div id="menu01">「ここにメニュー内容が書かれています」</div>
<div id="menu01">「ここにメニュー内容２が書かれています」</div>
<div id="menu01">「ここにメニュー内容３が書かれています」</div>
<div id="menu01">「ここにメニュー内容４が書かれています」</div>

このように書くと、左に寄って縦にずらりとメニューが並びます。（右側は空白になってしまいます。）

現状
□
□
□
□

という風に並ぶ上記メニューを、
□□
□□

という感じで並べたいのですが可能でしょうか。

制約としては、MTで書き出されるものなので、メニュー毎にidを変えるなどはできません。。
また、display:inline;なども使ってみましたが、何故か重なってしまい（文字は重なりません）、
思っているものにはなりません。。

本当に分かりません！よろしくお願いします！

回答No.1

noname#39970 · ベストアンサー

idは文書内唯一でなければならない。
このような場合はidではなくclassを用いる

#menu01
↓
.menu01

div id="menu01"
↓
div class="menu01"

横並びを区切る場合は必要な場所に
<div style="clear:both"></div>
を挟む。

補足

> idは文書内唯一でなければならない。
そうでした…。ありがとうございます！勉強になりました！

> <div style="clear:both"></div>
これは知りませんでした。しかしながらMovableTypeなのでdivが自動でメニュー分だけ吐き出され、
HTMLのタグは触れないんです…。

参考にさせて頂きます！ありがとうございます！

回答No.2

Muller3

＞MTで書き出されるものなので、メニュー毎にidを変えるなどはできません
HTMLではなく、テンプレートのその部分の記述を示した方がいいかも。
<MTEntries>
<div id="menu01"><$MTEntryBody$></div>
<MTEntries>
みたいな記述になっているんでしょうか？
だとしたら、#1のご回答にあるとおり、MTEntriesは繰り返しますので、idの部分はclassにした方がいいと思います。classなら何度出てきても大丈夫なので。

そいでもって、floatの綴りが違いますが…

お礼

ありがとうございます。記述を書きますと、仰る通り
<MTEntries><div class="menu01"><$MTEntryTitle$></div></MTEntries>
です（idをclassに修正しました）。

あとfloatの綴りも直したのですが、やはり
□□
□□
のようには並んでくれませんでした。。

無理なのでしょうか。。

補足

すみません！お礼の後、もう一度やってみたらできました！
本当に助かりました！皆様最高だと思います。

ありがとうございます！