dポイントプレゼントキャンペーン実施中！

横並びしたいのですが

解決済

  • 質問者：dcx147
  • 質問日時：
  • 回答数：4件

横並びしたいのですがdd.sub内のテキストがwidthサイズを超えて2段になった場合や
改行(<br>)を入れた場合それ以降のclear: both;が効かない状態になってしまいます。

dl, dl dd {
padding-left: 20px;
padding-bottom: 15px;
}

dl dd.sub {
float: left;
clear: both;
width: 55em;
}

dl dd.page {
margin-left: 55em;
margin-bottom: 10px;
}

<dl>
<dt>1 あああ</dt>
<dd class="sub">サブ1</dd>
<dd class="page">p1</dd>
<dt>2 いいい</dt>
<dd class="sub">サブ2</dd>
<dd class="page">p2</dd>
<dt>3 ううう</dt>
<dd class="sub">サブ3</dd>
<dd class="page">p3</dd>
</dl>

理想の並びとしては

1　あああ
　サブ1　p1

2　いいい
　サブ2　p2

3　ううう
　サブ3　p3

のようにしたいのですがCSSをどのようにすれば可能でしょうか？

仮に<dd class="clear"></dd>を追加すれば回り込みの解除はできるのですが
無駄に要素を入れたくないもので他にいい方法はないものかと悩んでおります。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： abril
  • 回答日時：

サブに対するwidthが55emと大変長い事、pageというclassの内容がp1、p2…という事は、もしかしてインデックスの様なものを意図してらっしゃいますでしょうか？サブ項目の数も大項目毎に異なるとか…



1　大項目1
　サブ項目1-1　p1
　サブ項目1-2　p10
　サブ項目1-3　p15

2　大項目2
　サブ項目2-1　p21

3　大項目3
　サブ項目3-1　p31
　サブ項目3-2　p35

もしも上記の様な内容だと仮定するなら、やはりマークアップも少し変更された方がより適切な論理構造になるかと思います。それに依り、CSSでの詳細度を工夫できますので、HTML側でclass属性を減らす事が可能になります。
以下は、その仮定に基づくサンプルです。詳細がわからないので、DOCTYPEはとりあえずHTML 4.01 strictにしてあります。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>
<link href="./css/sample22.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>

<dl class="index">
<dt>1　大項目1</dt>
<dd>

<dl>
<dt>サブ項目1-1</dt>
<dd>p1</dd>
<dt>サブ項目1-2　長い長い複数行になる様なテキスト（55em以上の長さ）</dt>
<dd>p10</dd>
<dt>サブ項目1-3</dt>
<dd>p15</dd>
</dl>

</dd>

<dt>2　大項目2</dt>
<dd>

<dl>
<dt>サブ項目2-1</dt>
<dd>p21</dd>
</dl>

</dd>

<dt>3　大項目3</dt>
<dd>

<dl>
<dt>サブ項目3-1</dt>
<dd>p31</dd>
<dt>サブ項目3-2</dt>
<dd>p35</dd>
</dl>

</dd>
</dl>

</body>
</html>
----------------------------------------------------------------------
【CSS】※「←～」の補足は検証の際は削除して下さい。
----------------------------------------------------------------------
/* 定義リストの余白を初期化 */
dl, dt, dd {
margin: 0;
padding: 0;
}
/* 以下、計算が容易になる様に、単位は全てemで指定。オリジナルで10px・15px・20pxだった箇所はそれぞれとりあえず0.7em・1em・1.5emと置き換えてあります。お好みで調整・再計算を。 */
/* 定義リストメイン */
dl.index {
width: 64em;←サブ項目名部分の55emから逆算して定義リスト全体の幅を決め打ち（55＋3＋1＋2＋1.5×2）
padding: 1em 0;←widthを指定しているので、paddingは上下方向のみ指定（左右は子要素dt、ddのmarginで置き換え）
}
dl.index dt {
width: 61em;←定義リストサブと同じ幅（サブ項目名55em＋ページ数3em＋両者の間の余白1em＋左余白2em）
margin: 0 0 0.5em 1.5em;←オリジナルではdlの左のpaddingとしていた値をdtのmarginに。ついでに定義リストサブとの余白を適度にとる為に下marginも設定。
}
dl.index dd {
width: 61em;←同上
margin-left: 1.5em;←同上（下マージンは子要素の定義リストサブで設定するので不要）
}
/* 定義リストサブ */
dl.index dd dl {
zoom: 100%;←回り込み解除の為のclearfix（IE対策）
margin-left: 2em;←サブ項目の左margin
}
dl.index dd dl:after {←ここ全体が回り込み解除の為のclearfix
display: block;
clear: both;
height: 0;
visibility: hidden;
content: "";
}
dl.index dd dl dt {
float: left;
width: 55em;
margin: 0 0 0.5em 0;←必要なmarginは下方向だけだが、親要素定義リストサブ内で設定された左marginが継承されてしまうのでそれもリセットして一括指定
}
dl.index dd dl dd {
float: right;←定義リストサブの右端へ合わせる
width: 3em;←ページ数を描画する領域を少し大目に（”p100”とか3桁になっても確保できます）
margin: 0 0 0.5em 0;←同上（dl.index dd dl dtと）
text-align: right;←ページ数の桁を右に合わせる
}
----------------------------------------------------------------------

いかがでしょうか？一応、IE6/7、Firefox2/3、Safari3、Opera9.61等で同様の表示結果を得ております。
floatは、positionにはないメリットもありますので、理屈を分かった上で回り込みの解除などに対応ができるのであれば、特に扱いに困ることもないと個人的には思います。
想定している構成が上記とは異なる場合は、具体的に補足して下さい。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： KI401
  • 回答日時：

> #1補足・礼



インライン要素・ブロック要素って分かる？
#1のdisplay:inline;は、本来ブロック要素のddをインライン要素のように表示させよ、という意味。
インライン要素は普通（他に何の指定もなければ）横並びするので、
floatとか全部取っ払っても#1のCSSだけで要望の形に並ぶはずだ。
# 調べればわかるだろうと思ったんだがなぁ。

#2さんが指摘しているように、floatなんてあんまり使わない方がいい。
特に理解できていないなら、使わずにするに越したことはない。

ちなみにfloatのまんまでやるならば、dlの次の要素でclearしてやればいい。
もっとも、それをやろうとすると変なID名をつけるか、変なCLASS名をつけることになって、
非常に気持ち悪いので、個人的にはあまりオススメしたくない。

# 隣接セレクタ"dl + *"がちゃんと使えればいいのに。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

皆さん本当にfloatがお好きなようで・・


floatという扱いが難しいものを使わなくても、relativeで行えば簡単です。
いずれにしても、
<dl id="contentTable">
　　<dt>表題</dt>
　　<dd class="page">リンク</dd>
　　<dd class="description">説明</dd>
　　<dt>表題</dt>
　　<dd class="page">リンク</dd>
　　<dd class="description">説明</dd>
</dl>
とするか・・
<dl id="contentTable">
　<dt>表題</dt>
　<dd>
　　<dl>
　　　<dt>説明</dt>
　　　<dd>リンク</dd>
　　</dl>
　</dd>
　<dt>表題</dt>
　<dd>
　　<dl>
　　　<dt>説明</dt>
　　　<dd>リンク</dd>
　　</dl>
　</dd>
</dl>
のようにマークアップすべきです。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： KI401
  • 回答日時：

dd {


display: inline;
}

この回答への補足

追記です。現在のCSSは以下のようになっています。

dl {
padding: 15px 0 15px 20px;
}

dd {
display: inline;
}

dl dd.sub {
float: left;
clear: both;
margin-left: 2em;
width: 55em;
}

dl dd.page {
margin-left: 57em;
}

補足日時：2009/03/11 03:40
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

お返事ありがとうございます。
dl dd {
display: inline;
}
を追加したところ回り込みは回避できました！
しかしp1,p2などが一段落ちてしまっているのですが単純に追加だけでは
ダメなのでしょうか？

CSSは詳しくないのですがwidthの指定も効いていないようです^^;

お手数ですが補足を頂けますと幸いです！

通報する
お礼日時：2009/03/11 03:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報