Question

我正在寻找与其条款一致的定义列表，以便

<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”在同一行开始，就像之前的定义一样。任何给定的解决方案都应允许此文本包含在＆lt; dd＆gt;下面。然后提供换行符。

致电：（555）123-4567

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

我已经审核了 How to style dt and dd so they are on the same line?，这导致了更多的表格布局，在这种情况下无效。

Answer 1

好的，这可以按你想要的方式工作。我修复了wazaminator代码，以便它可以在浏览器中运行。问题是少数浏览器为dds添加了一个margin-start。我没有在IE中测试：

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

dd {
  margin-left: 0px;
}

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

Answer 2

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

编辑：找到了一种方法，但这不是很好的代码：更改p的dd，并为你的dt添加一个margin-right。

这是fidle：http://jsfiddle.net/sPQmw/13/

Answer 3

如果你可以在<p>中包装每个dt和dd对，你可以使用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/

我可以在与DD相同的行上渲染DT吗？

3 个答案: