リストの表示で、
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で質問しましょう!
似たような質問が見つかりました
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- Access(アクセス) Accessのデータ型の日付/時刻型について 1 2023/04/02 17:03
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2023/01/23 09:24
- MySQL SQLについて質問です。 SELECT TO_CHAR(TO_DATE('90-10-08.'YY- 4 2022/05/13 20:55
- Access(アクセス) エクセルのVBAについて教えてください。 4 2023/01/21 10:21
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2023/01/23 17:13
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2023/01/23 11:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数行にまたがる括弧を表示し...
-
divタグ内のコンテンツが重なっ...
-
ol要素の番号とリスト項目の離...
-
HTMLで組織図を作成する方法
-
リストマーカーをボックス内に...
-
HTMLのdlとul どちらが正しいと...
-
<table>の高さ固定。情報増加時...
-
navの横並びにsnsアイコンを付...
-
ulタグやliタグの中でbrタグ...
-
アコーディオンメニューがかく...
-
「olタグ」内に「hタグ要素」...
-
左メニューをCSSで固定したい
-
<ul><li></li></ul>にするメリ...
-
HTML5のfooterに見出しを付けて...
-
CSS質問:大手サイトを見ると何...
-
レスポンシブWebデザインでリン...
-
横並びのリストで左端がはみ出る
-
li 長さ指定
-
ページを開いているときのリン...
-
3番目のBoxだけずれる
マンスリーランキングこのカテゴリの人気マンスリー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>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報