Question

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 'inline'
    $('dl.inline').each(function(dl_idx, dl_node)
    {
        var dl = $(dl_node),  // the current DL
            longest = 0;   // the current longest

        // go through its DT elements
        dl.each(function(dt_idx, dt_node)
        {
            var width = $(dt_node).width();

            // if this width is larger than the largest so far
            if(width > longest)
            {
                // store this width as the new longest
                longest = width;
            }
        });

        // Set all the DT elements in this DL to the longest found
        dl.children('dt').width(longest);
    });
}());

这段代码可能并不完美，但它提出了重点。

我希望有一个纯css解决方案，它使用浏览器本机代码而不是javascript。

HTML表使用display:table-cell之类的属性，虽然我无法获得任何工作......

我正在寻找的解决方案：

NOT 是否更改DL标记
不使用javascript

如果事实证明这样的解决方案是不可能的。或者要求标记不同，那么我认为javascript解决方案现在必须要做。

我应该说，原因我不仅仅是使用表，因为我觉得数据不够表格。这种数据更像是表的一行。我觉得定义列表更好地定义了Key和Value之间的关系（即Name - ＆gt; Alex）

Answer 1

纯CSS解决方案：
检查我的示例 codepen

将HTML5定义列表与表格对齐，不设置宽度，也不使用Javascript

1 个答案: