箇条書きがずれて表示されてしまいます。

質問

箇条書きで表される点がずれる（liタグ）
質問者：shige077 HTMLで箇条書きタグ
<ul>
<li>箇条書き一列目</li>
<li>箇条書き二列目</li>
　・・・
<li>箇条書き二十二列目</li>
</ul>

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

　・箇条書き一列目
　・箇条書き二列目
　－－－（省略）－－－
　・箇条書き二十一列目
・箇条書き二十二列目

と、いうように一番下の列がずれて表示されてしまっています。ずれないようにするにはどうしたらいいでしょうか。
タグのバグなのか、CSSの定義などの問題なのか、ちょっとわからなくて困っています。
どなたか教えていただけませんか？

回答No.3

partita

<ul>や</li>の後ろに全角スペースが入っていませんか？視認が難しいので慎重に。

また
<ul><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li></ul>

のように、改行なしのソースで試してみてください。

お礼

ご回答ありがとうございます。改行なしで試してみましたが、改善されませんでした。

回答No.2

LLLuna

例えば、li要素がul要素の外に出てしまっていたり、HTMLに何らかの記述ミスがある可能性が高いと思います。
もう一度ソースを確かめてみてください。

CSSのfloatプロパティの指定された要素によって、ul要素が回り込んでいると（厳密には回り込みではないが）、そのような現象が発生するかもしれません。

補足

ご回答ありがとうございます。
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 の値を調整すればよいのでしょうか。
よろしければまたご回答お願いします。

回答No.1

sr-agent

自分もやってみましたが、IE、ネスケのいずれのブラウザで見てみてもずれませんでした。
（以下のように書きました）
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
<li>箇条書き4</li>
<li>箇条書き5</li>
<li>箇条書き6</li>
<li>箇条書き7</li>
<li>箇条書き8</li>
<li>箇条書き9</li>
<li>箇条書き10</li>
<li>箇条書き11</li>
<li>箇条書き12</li>
<li>箇条書き13</li>
<li>箇条書き14</li>
<li>箇条書き15</li>
<li>箇条書き16</li>
<li>箇条書き17</li>
<li>箇条書き18</li>
<li>箇条書き19</li>
<li>箇条書き20</li>
<li>箇条書き21</li>
<li>箇条書き22</li>
</ul>

今一度HTMLタグやCSSやのほうを一度確認されてみては如何でしょうか？

回答にならなくてすみません。

お礼

ご回答ありがとうございます。HTMLやcssの再確認や↑のタグをコピ＆ペーストしましたが、改善されませんでした。