![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
No.4ベストアンサー
- 回答日時:
提示いただいたソースでも、ずれなかったです。
考えられるのは、やっぱり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">
<!--
html,body{height: 100%;}
#zentai {height: 100%;}
#b {
width:30%;
background-color: silver;
float: left;
}
#c {
margin-left: 30%;
background-color: #e8e8e8;
}
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;
}
-->
</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">箇条書き2行目</a></li>
<li><a href="quality.html#qi3">箇条書き3行目</a></li>
<li><a href="quality.html#qi4">箇条書き4行目</a></li>
<li><a href="quality.html#qi5">箇条書き5行目</a></li>
<li><a href="quality.html#qi5">箇条書き6行目</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
この場合、箇条書き5行目からずれていると思います。
#b {
width:30%;
background-color: silver;
float: left;
}
これにheight: 100%;を足すとずれが無くなります。
一度ご確認ください。
上記コードを解析し、cssと照らし合わせてみたら解決しました。
左側にあるフレームのfloatにheight;900px;とつけたし、プレビュー画面とにらめっこしましたら、ずれがなくなりました。
ほんとに有難うございます。
ここまで丁寧に付き合っていただき、感謝しております。
No.3
- 回答日時:
#2の訂正です・・・。
</dd>が抜けているのと、
dl.aaa dd ul{
padding: 0px 0px 0px 30px;
list-style-type: disc;
color: #999999;
}
この部分を自分の見やすい色に変更したまま載せてしまいました・・・。
この回答への補足
#2の補足の訂正です。
1)
<dt><a href="ranking.html">あああ</a></dt>
<dd></dd>
は、関係がないタグです。
2)
<li><a href="quality.html#qi4">箇条書き4行目a></li>
”箇条書き4行目”を記入するときに</a>を書き間違えました。
No.2
- 回答日時:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title></title>
<style type="text/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: #999999;
}
dl.aaa a{
color: #808080;
}
-->
</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">箇条書き2行目</a></li>
<li><a href="quality.html#qi3">箇条書き3行目</a></li>
<li><a href="quality.html#qi4">箇条書き4行目a></li>
<li><a href="quality.html#qi5">箇条書き5行目</a></li>
<li><a href="quality.html#qi6">箇条書き6行目</a></li>
<li><a href="quality.html#qi7">箇条書き7行目</a></li>
<li><a href="quality.html#qi8">箇条書き8行目</a></li>
<li><a href="quality.html#qi9">箇条書き9行目</a></li>
<li><a href="quality.html#qi11">箇条書き10行目</a></li>
<li><a href="quality.html#qi12">箇条書き11行目</a></li>
<li><a href="quality.html#qi13">箇条書き12行目</a></li>
<li><a href="quality.html#qi14">箇条書き13行目</a></li>
<li><a href="quality.html#qi15">箇条書き14行目</a></li>
<li><a href="quality.html#qi17">箇条書き15行目</a></li>
<li><a href="quality.html#qi18">箇条書き16行目</a></li>
<li><a href="quality.html#qi19">箇条書き17行目</a></li>
<li><a href="quality.html#qi20">箇条書き18行目</a></li>
<li><a href="quality.html#qi21">箇条書き19行目</a></li>
<li><a href="quality.html#qi24">箇条書き20行目</a></li>
<li><a href="quality.html#qi25">箇条書き21行目</a></li>
<li><a href="quality.html#qi26">箇条書き22行目</a></li>
</ul>
</dd>
No.1
- 回答日時:
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 の値を調整すればよいのでしょうか。
よろしければまたご回答お願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHP一覧表示した項目にリンクをはりたい 1 2023/07/12 17:08
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- Word(ワード) ワードの段落について 下のように文章に番号をつけて箇条書きにしたいです。新しい番号書式の定義を触って 1 2023/04/16 16:32
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- その他(学校・勉強) 怒りを思い出してしまい、勉強がはかどりません! 箇条書きで、こういうときの対処法あるだけ全て教えてく 11 2023/08/28 16:53
- アニメ アニメの女の子みたいになる方法を教えて下さい 直すべき部分も箇条書きで。 1 2022/08/05 18:31
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
CSSのどの部分を変更すると...
-
htmlの文字が縦書きになる
-
html の divとtable の役割
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
機種依存文字、m2(平方メート...
-
個別にリンクの色を変える方法
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
CSS、width100%でもできる余白
-
「olタグ」内に「hタグ要素」...
-
<table>の高さ固定。情報増加時...
-
ある要素の中身を全部グレーア...
-
<ul><li></li></ul>にするメリ...
-
CSSでボックスのheightが0になる
-
定義リストに下線をつけたいと...
-
マウスオーバーでポップアップ...
-
リストマーカーをボックス内に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
ドリームウィーバーでリスト作...
-
ホームページビルダー14でメニ...
-
リストの画像をくっつけたい!
-
CSSのどの部分を変更すると...
-
CSSの継承について...
-
光沢のあるボタンの作り方について
-
CSSの外部参照について。
-
IEの時に空白ができてしまします。
-
CSSのposition指定で親要素の背...
-
箇条書きで表される点がずれる...
-
Firefoxだとメニューバーが崩れ...
-
階層型ドロップダウンメニュー...
-
SEO対策について
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
おすすめ情報