リストを繰り返し表示したい

質問

こんにちは。初めてのホームページ作りにHTMLとスタイルシートで挑んでいます。初めてのことなので、分からないことばかりで、つまづきながら作成しています。そこで、教えていただきたいのが、リストを枠線で囲って、同じ物を下に作っていきたいのですが、(内容だけを変える）<ul>○○○</ur><ul>○○○</ul>という風につくりました。リストを下に置くと、上のリストの下線と下のリストの上線が消えてしまい、(意味わかりますか？）二つのリストがくっついてしまいます。きちんと二つのリストとして表示するにはどうしたらいいでしょうか。教えてください。よろしくお願いします。

回答No.2

prussianblue · ベストアンサー

初めまして。No.1さんの仰るとおり、不明な点が多いのですが、困り度３のようなので、予想の範囲で、お話してみます。
まず、次のリストに接する側の線が消えてしまうというのは、この不明点の多い段階では原因が（私には）わからないのですが、二つのリストの間に隙間が開かないこと事態は、マージンを設定していないからではないかと思います。
IE6で試してみたのですが、<ul>にborderを設定すると、リスト記号が枠の外にはみ出してしまうようなので、<ul>を<div>で括って、それにborderをかけているのではないかと想像してみました。ただそれだけだと、その場合、二つの枠はくっついてしまうみたいですね。消える線の原因はわかりませんが、marginを設定してみたら改善されないでしょうか？ちなみに、下記の通りにしてみたら大丈夫でした。色やマージンの幅は例です。

↓html

<div class="list">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
<div class="list">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>

↓css

div.list {
border: solid 1px gray;
margin: 3px;}

お礼

ありがとうございました！！！！！
詳しく説明していただき、本当にありがとうございました。途中の</div>を忘れてしまっていたようです。ご親切に本当にありがとうございましたm(__)m

回答No.1

frogeye

色々と分からないことが多いのですが…

１．「同じ物」とはどういう意味なのか
“同じように枠線をつけたリスト”でしょうか？

２．どのようにしてulに枠をつけているでしょうか？

出来ればもう少し具体的なソース（HTML と CSS）を提示して下さい。

お礼

詳しく書かず、うまく伝わらずにすみませんでした。今度質問するときにはきちんと伝わるように書かなくては、と思っています。ありがとうございました。