web-dev-qa-db-ja.com

インラインペアの定義リスト

用語と定義のペアの定義リストを作成しようとしています。各ペアは1つの別の行に存在します。 dtsとdds display:inlineを作成してみましたが、ペア間の改行が失われます。各ペアに（個別の用語/定義ではなく）行があることを確認するにはどうすればよいですか？

例：

<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>

降伏：

Term 1 Def 1
Term 2 Def 2

インライン化するためのCSSは次のようになります。

dt,dd{display:inline;}

降伏：

Term 1 Def 1 Term 2 Def 2

...これは私が望んでいることではありません（ペアの間に改行がない場合）。

csslistlineinlinedefinition
19
krainert

これを試して：

dt, dd { float: left }
dt { clear:both }

間隔を広げたい場合は、dt ddに下マージンを追加してください。

28
Diodeus - James MacFarlane

別の解決策：

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}
27
Andrey Fedoseev

私はこれらの答えを試しましたが、最終的には this になります。

私が簡略化したもの：

  dl {    
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;    
  }
  dt:after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;        
  }
5
Tomas Kubes

別の解決策は、インラインブロックとパーセンテージの幅を使用することです。 dd + dtの合計幅が50％より大きい限り。

dt, dd {
  display: inline-block;
}

dt {
  width: 50%;
}

dd {
  min-width: 5%;
}

これにより、dd要素をより一貫して配置できるようになりました。

2
ReggieB

別の簡単な解決策

dt {
    display: block;
    float: left;
    min-width: 100px;
}

https://jsbin.com/vumeyowana/edit?html,css,output

2
Inclooder

Andrey Fedoseevの答えは、古いAndroid（ストックブラウザ4.3）では機能しません。

これはそのブラウザと私がチェックした他のすべてのブラウザで機能します：

dt::before {
  content: "\A";
  white-space: pre-wrap;
  display: block;
  height: .5em;
}

dt, dd {
  display: inline;
  margin: 0;
}
<dl>
  <dt>AM</dt>
  <dd>Description for am that should span more than one line at narrow screen widths.</dd>
  <dt>PM</dt>
  <dd>this means afternoon.</dd>
</dl>
0
Ruskin

「シマウマ」の背景または各DT-DDペアを区切る境界線がある場合、これはうまく機能します。

dt, dd { padding: 8px 6px; display: block;

}
dt {
    font-weight: 600;
    float: left;
    min-width: 50%;
    margin: 0 8px 0 0;
}
dd:nth-of-type(odd) {
    background: #eee;
}
</ code>

これは、灰色の背景で両方のアイテムを一列に折り返すように見えます。 DTの垂直方向の高さがDDよりも低い限り-これは通常のケースです。

  • ブラウザはまだテストされていません。
0
Must Impress