相关疑难解决方法(0)

我有以下html:

<dl>
        <dt>Item 1</dt>
        <dd>
            <ul>
                <li>Value 1</li>
            </ul>
        </dd>
        <dt>Item 2</dt>
        <dd>
            <!-- this item is missing a value -->
        </dd>
        <dt>Item 3</dt>
        <dd>
            <ul>
                <li>Value 1</li>
                <li>Value 2</li>
                <li>Value 3</li>
            </ul>
        </dd>
    </dl>

我想把它说成(而不是将术语和定义放在彼此之下的正常dl):

Item 1    Value 1
Item 2    
Item 3    Value 1
          Value 2
          Value 3

这不是问题.问题是我想在每个术语/定义对之间添加一个边距.问题是定义的高度不同(它们的范围在0到5个列表项之间),所以我不能在dd标签上应用相同的边距.

如何设置定义列表项的样式以使每个定义在一行中？

HTML:

<dl>
    <dt>word</dt><dd>meaning</dd>
    <dt>word</dt><dd>meaning</dd>
    <dt>word</dt><dd>meaning</dd>
</dl>

我需要的视觉渲染:

*word* meaning
*word* meaning
*word* meaning

我正在寻找符合其条款的定义列表,以便这样做

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

电话:(555)123-4567

我已经尝试过使用dt,dd{display:inline},但是这会导致所有定义在一行上显示出来.

我已经回顾了 如何设置dt和dd的风格,以便它们在同一条线上？它导致了更多的表格布局,在这种情况下不起作用.

它用于定义列表，仅允许dt和dd标签。dt将 a及其关联内容包装dd在 a 内部是无效的div。定义列表示例：

<dl>
    <dt>Name:</dt>
    <dd>Nick</dd>
    <dt>Age:</dt>
    <dd>26</dd>
    <!-- etc -->
</dl>

我希望dt和dd标签成为换行的内联块。dt/dd我想在一行上允许最多两对，但我不想让它在dt标签后面换行。换句话说，我从不希望“Name”和“Nick”位于不同的行上。我也不希望“年龄”和“26”出现在不同的行上。也许所有四个都在一行上，或者“Name”和“Nick”可能在一行上，“Age”和“26”在下一行上，具体取决于视口宽度。

我尝试将 元素放在元素之间，但这没有用。我无法将 dt 与其关联的 dd 包装在一起，因为从技术上讲，这是无效的标记。

这个问题有没有正确的解决办法呢？或者我是否必须放弃语义原则才能获得我想要的样式？

编辑：这不是How to style dt and dd so they are on a line?的重复项 因为我说“我想在一行上允许最多两个 dt/dd 对”。是一对还是两对取决于可变内容。

HTML5 DL 元素（类似标记）：

<dl class="inline">
    <dt>Name</dt>
    <dd>Alex</dd>
    <dt>Age</dt>
    <dd>22</dd>
    <dt>Hobby</dt>
    <dd>Programming</dd>
</dl>

默认渲染如下：

Name
    Alex
Age
    22
Hobby
    Programming

不过，我希望它像表格一样呈现，其中各列对齐：

Name    Alex
Age     22
Hobby   Programming

这可以使用 css 轻松完成

dl.inline dt{clear:left}
dl.inline dt,dl.inline dd{float:left}

并通过设置 DT 元素的宽度

dl.inline dt{width: 100px}

     100px
<----------->
Name         Alex
Age          22
Hobby        Programming

成功！

问题是，这需要将宽度设置为最长的文本。这意味着 css 依赖于 html。基本上每次我创建一个新的定义列表时，我都必须创建一个新的 css 类，找到最长的单词，然后将其添加到 css 中

dl.inline.dt-where-the-longest-string-is-email-address{width:86px}

我希望 DT 元素自动与最长的元素一样长。

使用 jquery 可以轻松完成此操作。我们基本上会循环 DT 并记住最长的。然后将该 DL 中的所有其他内容设置为该长度：

(function()
{
    // for every DL on the page, that has class …