リストの表示で、
dtとそれに続くddの組を1行ずつで表示させたいと思います。
DOCTYPEはHTML4.01 Transitionalです。
<dl>
<dt>Windows</dt><dd>IE6.0</dd><dd>Firefox1.5</dd><dd>Opera8.5</dd><dd>Netscape7.1</dd>
<dt>MacOS</dt><dd>Safari1.2</dd><dd>Firefox1.5</dd><dd>Opera8.5</dd><dd>Netscape7.1</dd>
<dt> </dt><dd>補足事項1</dd>
<dt> </dt><dd>補足事項2</dd>
</dl>
<style>
dt {
clear:left;
float: left;
}
dd {
float:left;
}
(その他margin等の指定あり)
とすると、FirefoxやOperaではWindows、MacOS、補足事項の各行に分けられて表示されますが、
IE6ではdtのみ改行された表示になり、ddはすべて、Windowの行に1行で表示されてしまいます。
とりあえずの対策として、
td{ _float:none; }
を指定して、強制的に改行していますが、
これでは補足のところの が改行されて、浮いてしまいます。
dtの直前で改行、ddの後ろとddの前は改行なし、という表示は出来ない物でしょうか?
テーブルでの表示、および、display:inlineにして<br>を入れるのはNGとさせてください。
<dd style="clear:left;"> </dd>
を入れても、表示は変わりませんでした。
目標とする表示
Windows IE6.0 Firefox1.5 Opera8.5 Netscape7.1
MacOS Safari1.2 Firefox1.5 Opera8.5 Netscape7.1
補足事項1
補足事項2
No.2ベストアンサー
- 回答日時:
> display:inlineにして<br>を入れるのはNG
display:inlineにして<br>は使わないのであればOKでしょうか?
<style type="text/css">
<!--
ul {
list-style:none;
}
ul li ul, ul li ul li {
display:inline;
}
.fl {
float:left;
}
.cl {
clear:left;
}
.ti {
text-indent:1em;
}
-->
</style>
<ul>
<li class="fl">Windows
<ul>
<li>IE6.0</li>
<li>Firefox1.5</li>
<li>Opera8.5</li>
<li>Netscape7.1</li>
</ul>
</li>
<li class="fl cl">MacOS
<ul>
<li>Safari1.2</li>
<li>Firefox1.5</li>
<li>Opera8.5</li>
<li>Netscape7.1</li>
</ul>
</li>
<li class="cl ti">補足事項1</li>
<li class="cl ti">補足事項2</li>
</ul>
確認できました。
<dt>と<dd>を区別することで2種類のスタイルを使い分けていましたが、
入れ子にすることでclassを指定しなくても区別させることが出来そうですね。
補足事項についても対応していただき(空白リストを消す)ありがとうございました。
HTMLを簡略化しつつ(入れ子にせずに)目的の表示になりそうな案が出ることを期待しつつ、
あと数日、終了させずにおいておきたいと思います。
なお、floatを使うと翻訳サイトを通じてアラビア語で表示すると右寄せにならない、
という弊害があるのは存じていますが、
今回は翻訳サイトを通じた表示は考えない方向で進めています。
ありがとうございました。
No.1
- 回答日時:
<dl>
<dt>Windows</dt><dd>IE6.0 Firefox1.5 Opera8.5 Netscape7.1</dd>
<dt>MacOS</dt><dd>Safari1.2 Firefox1.5 Opera8.5 Netscape7.1</dd>
<dt> </dt><dd>補足事項1</dd>
<dt> </dt><dd>補足事項2</dd>
</dl>
このようなHTMLではダメ?
HTMLの意味合いからも1行ずつ分けたかったため、
また、音声ブラウザでは一気に読み出されてしまう可能性があるため(音声ブラウザでは未確認ですが)
1つの項目に入れるのはさけたかったのです。
今回使用しているページではAjaxを使っているので、利用ブラウザが限られますが、
このリストの書き方自体は、(ブラウザリストだけでなく)ほかのリストの書き方にも応用できると思いますから。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
更新履歴の作り方
-
ulとliで囲った文字の一部を変...
-
excel vba で ulタグのなかのse...
-
navの横並びにsnsアイコンを付...
-
番号付きリスト(<Ol><Li>・・...
-
divタグ内のコンテンツが重なっ...
-
カルーセルスライダー「slick.j...
-
nth-childが効かない…。原因は...
-
<ul>~</ul>が二つ続くと間に改...
-
文法チェックの<A>と</A>の間が...
-
<ul><li></li></ul>にするメリ...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
CSS「table-cell」で横並びにし...
-
css ol liにdisplay:inlineを設...
-
html/cssの、navを2段にする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
HTMLで組織図を作成する方法
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
htmlの<ol>タグで、数字などを...
-
HTML5のfooterに見出しを付けて...
-
css 横並びのナビゲーションバ...
-
疑似クラス :activeが効きません
-
list-style-type部分だけ大きく...
おすすめ情報