5

<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;
 }
4

3 に答える 3

7

デフォルトでは<dt>、 と<dd>はブロックレベルの要素であり、「整列」する必要はまったくなく、自然に次々と表示されます。

ただし、ブートストラップの.dl-horizontalは、この要素を並べて並べます。そして、いずれか<dd>がコンテンツを持たない場合、それは折りたたまれ、他のものは上に移動します。(これは明らかに望ましくないことです。) この動作は、次のように「修正」できます。

dd {
  /* should be the same as line-height */
  min-height: 20px;
}

しかし、これを Bootstrap のバグとは言いません。なぜ定義のない定義用語が必要なのですか? 用語をまったく表示しないことは、私にとってはるかに理にかなっています。

于 2012-10-14T15:55:16.980 に答える
4

別の解決策は次のとおりです。

.dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}
于 2013-05-31T08:59:10.510 に答える
0

dt と dd の width と set min-height を上書きすると、dt と dd の両方で空または長いコンテンツの問題が解決されます。

.dl-horizontal > dt {
  width: 51% !important;
}

.dl-horizontal > dd {
  width: 49% !important;
}

dt, dd {
  line-height: 20px;
  min-height: 20px; /* must be line-height, to allocate height for empty elements */
}
于 2015-07-09T08:43:47.913 に答える