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

Bio：人物的全文bio，跨越多行，与文本“Bio”在同一行开始，就像前面的定义一样。任何给定的解决方案都应允许此文本在 <dd> 下方换行，然后在之后提供换行符。

电话： (555) 123-4567

我已经尝试过使用dt,dd{display:inline}，但这导致所有定义都显示在一行中。

我已经查看了 如何设置 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 回答
3

怎么样dt { float: left; clear: left;}？浮动将允许它在右侧有一个文本，并且清除阻止它们进入同一行。

编辑：找到了一种方法，但它不是很好的代码：将 dd 更改为 ap，并为您的 dt 添加一个边距。

这是小提琴：http: //jsfiddle.net/sPQmw/13/

于 2013-04-18T14:41:09.630 回答
-2

如果您可以将每个 dt 和 dd 对包装在 a<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 回答