7

用語に沿った定義のリストを探しているので、

<dl>
  <dt>Email</dt><dd>contact@example.com</dd>
  <dt>Bio</dt><dd>Person's full-text bio, which spans multiple lines, and starts on the same line as the text <q>Bio</q>, just like the previous definitions. Any given solution should both allow this text to wrap below the &lt;dd&gt; and then provide a line break afterwards.</dd>
  <dt>Phone</dt><dd>(555) 123-4567</dd>
</dl>

次のようにレンダリングします。

電子メール: contact@example.com

略歴:前の定義と同様に、複数の行にまたがり、「略歴」というテキストと同じ行から始まる個人の全文略歴。どのソリューションでも、このテキストを <dd> の下で折り返すことができるようにし、その後で改行を提供する必要があります。

電話: (555) 123-4567

を使用してみましdt,dd{display:inline}たが、すべての定義が 1 行に表示されてしまいました。

dt と dd を同じ行に配置する方法を既に確認しましたか? その結果、より表形式のレイアウトになりましたが、この場合は機能しません。

4

3 に答える 3

18

わかりました、これはあなたが望むように機能します。ブラウザ間で動作するように wazaminator コードを修正しました。問題は、いくつかのブラウザーが dds のマージン開始を追加することでした。私はIEでテストしませんでした：

dt {
  float: left;
  clear: left;
  margin-right: 5px;
  font-weight: bold;
}

dd {
  margin-left: 0px;
}

http://jsfiddle.net/sPQmw/18/

于 2013-04-18T14:51:22.307 に答える
-2

dt と dd の各ペアを でラップできる場合は<p>、 を使用display: inlineして両方を同じ行に入れることができますが<p>、 は次の dt/dd ペアを次の行に強制します。

HTML:

<dl>
    <p><dt>Email</dt><dd>contact@example.com</dd></p>
    <p><dt>Phone</dt><dd>(555) 123-4567</dd></p>
    <p><dt>Bio</dt><dd>Person's full-text bio, which spans multiple lines, and starts on the same line as the text <q>Bio</q>, just like the previous definitions. Any given solution should both allow this text to wrap below the &lt;dd&gt; and then provide a line break afterwards.</dd></p>
</dl>

CSS:

dt {
    display: inline-block;
}

dd { display: inline; }

JSFiddle: http://jsfiddle.net/fwAFq/

于 2013-04-18T15:26:45.890 に答える