箇条書きで表される点がずれる(liタグ)
質問者:shige077 HTMLで箇条書きタグ
<ul>
<li>箇条書き一列目</li>
<li>箇条書き二列目</li>
・・・
<li>箇条書き二十二列目</li>
</ul>
のタグをブラウザで見てみると
・箇条書き一列目
・箇条書き二列目
---(省略)---
・箇条書き二十一列目
・箇条書き二十二列目
と、いうように一番下の列がずれて表示されてしまっています。ずれないようにするにはどうしたらいいでしょうか。
タグのバグなのか、CSSの定義などの問題なのか、ちょっとわからなくて困っています。
どなたか教えていただけませんか?
No.2ベストアンサー
- 回答日時:
例えば、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.3
- 回答日時:
<ul>や</li>の後ろに全角スペースが入っていませんか?視認が難しいので慎重に。
また
<ul><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li></ul>
のように、改行なしのソースで試してみてください。
No.1
- 回答日時:
自分もやってみましたが、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やのほうを一度確認されてみては如何でしょうか?
回答にならなくてすみません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHP一覧表示した項目にリンクをはりたい 1 2023/07/12 17:08
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- Word(ワード) ワードの段落について 下のように文章に番号をつけて箇条書きにしたいです。新しい番号書式の定義を触って 1 2023/04/16 16:32
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- 学校 高一と高三の違いは? 箇条書きで 5 2022/08/15 17:03
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- PDF 肌を綺麗にする方法を箇条書きで書いて行って欲しいです。 2 2023/06/25 13:27
- アニメ アニメの女の子みたいになる方法を教えて下さい 直すべき部分も箇条書きで。 1 2022/08/05 18:31
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
<table>の高さ固定。情報増加時...
-
リストの数字のフォントサイズ...
-
jQuery-もっと見るボタンをスマ...
-
html <li>の中の文字一部に色を...
-
HTML5のfooterに見出しを付けて...
-
ulタグやliタグの中でbrタグ...
-
HTMLで組織図を作成する方法
-
<ol><li> 左側にスペースがで...
-
【至急】ul li 行間調整ができ...
-
htmlの<ol>タグで、数字などを...
-
【CSS】メニュー上部に固定させ...
-
IEで<td>の全角を有効にする方法
-
HTMLです
-
Tableの1セル内に画像・テキス...
-
レスポンシブWebデザインでリン...
-
プルダウンメニューの背景色を...
-
真横に展開するドロップダウン...
-
メニューバーのラインの作り方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報