箇条書きで表される点がずれる（liタグ）

解決済

質問者：shige077
質問日時：2006/05/08 11:46
回答数：4件

HTMLで箇条書きタグ
<ul>
　<li>箇条書き一列目</li>
<li>箇条書き二列目</li>
<li>箇条書き三列目</li>
</ul>

のタグをブラウザで見てみると

　・箇条書き一列目
　・箇条書き二列目
・箇条書き三列目

と、いうように三列目がずれてしまっています。三列目がずれないようにしたいと思っています。
タグのバグなのか、CSSの定義などの問題なのか、ちょっとわからなくて困っています。
どなたか教えていただけたらと思います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.4ベストアンサー

回答者： awasumi
回答日時：2006/05/09 14:16

提示いただいたソースでも、ずれなかったです。

考えられるのは、やっぱりfloatだと思うんですけど、
ページ全体のレイアウト等でのfloatは使っていませんか？
*html*
<div style="float:left;">
や
*css*
{float: left}

【例】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">

</style>
</head>
<body>
<div id="zentai">
<div id="b">
<p>えへへ</p><p>えへへ</p>
</div>
<div id="c">
<dl class="aaa">
<dd>
<ul>
<li><a href="quality.html#qi1">箇条書き一行目</a></li>
<li><a href="quality.html#qi2">箇条書き２行目</a></li>
<li><a href="quality.html#qi3">箇条書き３行目</a></li>
<li><a href="quality.html#qi4">箇条書き４行目</a></li>
<li><a href="quality.html#qi5">箇条書き５行目</a></li>
<li><a href="quality.html#qi5">箇条書き６行目</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
この場合、箇条書き5行目からずれていると思います。

#b {
width:30%;
background-color: silver;
float: left;
}
これにheight: 100%;を足すとずれが無くなります。
一度ご確認ください。

- 0
- 件

通報する

この回答へのお礼

上記コードを解析し、ｃｓｓと照らし合わせてみたら解決しました。
左側にあるフレームのfloatにheight；900px；とつけたし、プレビュー画面とにらめっこしましたら、ずれがなくなりました。
ほんとに有難うございます。
ここまで丁寧に付き合っていただき、感謝しております。

通報する

お礼日時：2006/05/10 10:44

No.3

回答者： awasumi
回答日時：2006/05/09 11:15

＃2の訂正です・・・。

</dd>が抜けているのと、

dl.aaa dd ul{
padding: 0px 0px 0px 30px;
list-style-type: disc;
color: #999999;
}
この部分を自分の見やすい色に変更したまま載せてしまいました・・・。

この回答への補足

#2の補足の訂正です。

１）
<dt><a href="ranking.html">あああ</a></dt>
<dd></dd>

は、関係がないタグです。

２）
<li><a href="quality.html#qi4">箇条書き４行目a></li>
”箇条書き４行目”を記入するときに</a>を書き間違えました。

補足日時：2006/05/09 13:44

通報する

- 0
- 件

通報する

No.2

回答者： awasumi
回答日時：2006/05/09 11:06

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<dl class="aaa">
<dt>
<dd>
<ul>
<li>箇条書き一列目</li>
<li>箇条書き二列目</li>
<li>箇条書き三列目</li>

～略～

<li>箇条書き二十二列目</li>
</ul>
</dt>
</dl>
</body>
</html>

このような形ってことですよね？
私のほうでは、ずれることなくきちんと表示されるので
違うところに原因があるかもしれません。。。
実際のHTMLのほうのソース（ul部分）も教えていただけるともうちょっと原因追求できるかもしれません。

この回答への補足

先ほどの補足から迅速なご回答に感謝しております。ありがとうございます。ソース部分を載せさせていただきます。

<dt><a href="ranking.html">あああ</a></dt>
<dd></dd>

<dt><a href="quality.html">いいい</a></dt>
<dd>
<ul>
<li><a href="quality.html#qi1">箇条書き一行目</a></li>
<li><a href="quality.html#qi2">箇条書き２行目</a></li>
<li><a href="quality.html#qi3">箇条書き３行目</a></li>
<li><a href="quality.html#qi4">箇条書き４行目a></li>
<li><a href="quality.html#qi5">箇条書き５行目</a></li>
<li><a href="quality.html#qi6">箇条書き６行目</a></li>
<li><a href="quality.html#qi7">箇条書き７行目</a></li>
<li><a href="quality.html#qi8">箇条書き８行目</a></li>
<li><a href="quality.html#qi9">箇条書き９行目</a></li>
<li><a href="quality.html#qi11">箇条書き１０行目</a></li>
<li><a href="quality.html#qi12">箇条書き１１行目</a></li>
<li><a href="quality.html#qi13">箇条書き１２行目</a></li>
<li><a href="quality.html#qi14">箇条書き１３行目</a></li>
<li><a href="quality.html#qi15">箇条書き１４行目</a></li>
<li><a href="quality.html#qi17">箇条書き１５行目</a></li>
<li><a href="quality.html#qi18">箇条書き１６行目</a></li>
<li><a href="quality.html#qi19">箇条書き１７行目</a></li>
<li><a href="quality.html#qi20">箇条書き１８行目</a></li>
<li><a href="quality.html#qi21">箇条書き１９行目</a></li>
<li><a href="quality.html#qi24">箇条書き２０行目</a></li>
<li><a href="quality.html#qi25">箇条書き２１行目</a></li>
<li><a href="quality.html#qi26">箇条書き２２行目</a></li>
</ul>
</dd>

補足日時：2006/05/09 13:32

通報する

- 0
- 件

通報する

No.1

回答者： awasumi
回答日時：2006/05/09 08:05

floatを使っていますか？

左側のブロックが右側のブロックに流れ込むとリストも流れ込んで、このようにずれることがあります。

右側のブロックのmargin-left、または左側ブロックのheightを一度調整してみてください。

この回答への補足

ご回答ありがとうございます。
floatはこのCSSでは使っていないようです。
このようになっています。
---以下ソースです---
dl.aaa {
margin: 0em 0em 3em 1em;
}
dl.aaa dt{
background: #aaa url(../common_images/b.gif) no-repeat left center;
padding: 0px 0px 0px 10px;
margin: 0.5em 0em 0em 0em;
}
dl.aaa dd{
border-bottom: 1px dashed #808080;
padding: 0em 0em 0.5em 0em;
}
dl.aaa dd ul{
padding: 0px 0px 0px 30px;
list-style-type: disc;
color: #0000ff;
}
dl.aaa a{
color: #808080;
}
---
margin padding の値を調整すればよいのでしょうか。
よろしければまたご回答お願いします。