<dl>
説明リストタグで予期しない動作が発生しています。
私は twitter ブートストラップ 2 を使用しており、次のコード例を使用しています。
<!DOCTYPE html>
<dl class="dl-horizontal">
<dt>Item1</strong></dt><dd>This is a description of Item1</dd>
<dt>Item2</strong></dt><dd>This is a description of Item2</dd>
<dt>Item3</strong></dt><dd>This is a description of Item3</dd>
<dt>Item4</strong></dt><dd>This is a description of Item4</dd>
<dt>Item5</strong></dt><dd>This is a description of Item5</dd>
</dl>
...すべてが期待どおりに機能し、次のように表示されます。
Item1 This is a description of Item1
Item2 This is a description of Item2
Item3 This is a description of Item3
Item4 This is a description of Item4
Item5 This is a description of Item5
ただし、このコードでは:
<!DOCTYPE html>
<dl class="dl-horizontal">
<dt>Item1</strong></dt><dd>This is a description of Item1</dd>
<dt>Item2</strong></dt><dd></dd>
<dt>Item3</strong></dt><dd>This is a description of Item3</dd>
<dt>Item4</strong></dt><dd>This is a description of Item4</dd>
<dt>Item5</strong></dt><dd>This is a description of Item5</dd>
</dl>
この問題のある表示が表示されます。
Item1 This is a description of Item1
Item2 This is a description of Item3
Item3 This is a description of Item4
Item4 This is a description of Item5
Item5
とタグが期待どおりに一致<dt>
し<dd>
ません。
ここで w3.org ワーキング ドラフトを読むhttp://www.w3.org/TR/html-markup/dl.html#dl
...コンテンツが空白の場合、ブラウザーまたはプログラマーが<dt>
and要素を一致させる責任があるかどうかは私にはわかりません。<dd>
<dd>
上記のコードを Firefox と Safari でテストしたところ、同じ出力が表示されました。
これは意見の問題ですか、twitter ブートストラップ 2 のバグですか、それとも HTML5 説明リストの使用を誤解していますか? この使用法は、<dl>
によって自動生成された show.html.erb コードに表示されます。
rake g bootstrap:themed model
データ要素が空白の場合、表示される出力はラベルと一致しません。それ以外の場合、themed オプションは非常に便利なので、残念です。
テーマの出力を次のように変更することで、部分的に「問題を修正」できます。
<dt><strong><%= model_class.human_attribute_name(:name) %>:</strong></dt>
<dd><%= @server.name %> <%= "-blank-" if @server.name.blank? %> </dd>
...しかし、空白の要素を表示するために「-blank-」が表示されたままです。" " のようなスペースを含む文字列のようなものを使用すると、同じラベルの説明のずれの問題が発生します。
<dl>
ここでは、どのエンティティ、HTML5 タグ、ブートストラップ、または私の理解が対象外で、その理由を説明することに集中して回答してください。
どうもありがとう!
-編集- ブートストラップを使用している場合、次のように css を使用すると問題なく動作します。
dt, dd {
line-height: 20px;
/* Keep this the same as line-height */
min-height: 20px;
}