使用 CSS 设计 dl 和 dt 以模仿类似表格的表示答案

【问题标题】：Styling dl and dt with CSS to mimic table-like presentation使用 CSS 设计 dl 和 dt 以模仿类似表格的表示
【发布时间】：2012-03-26 00:28:21
【问题描述】：

我在使用 CSS 设置 dl 和 dt 元素的样式时遇到以下问题。我更喜欢总是使用与 IE6/IE7 和现代浏览器兼容的非常基本的 CSS。我正在尝试获得一个效果，对我来说应该很容易实现。

这是我正在使用的初始源代码的精简版本，用于尝试解决这个问题：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>

        <style type="text/css">

        .terms dl {
            float: left;
            padding-left: 0px;  
        }

        .terms dt, .terms dd {
            text-align: center;
            margin: 0px;
            float: left;
        }

        .terms dt {

            border: solid blue 1px;
            clear: left;    
        }

        .terms dd {
            border: solid red 1px;
            margin-right: 40px;
            margin-left: 40px;
        }

        </style>
    </head>
    <body>
        <div class="terms">
            <h1>Terms</h1>
            <dl>
                <dt>Term 1:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 2:</dt>
                <dd>Definition for term</dd>

                <dt>Term 3 with longer term title:</dt>
                <dd>Definition for term</dd>

                <dt>Term 4:</dt>
                <dd>Definition for term</dd>

                <dt>Term 5:</dt>
                <dd>Definition for term</dd>

                <dt>Term 6:</dt>
                <dd>Definition for term</dd>
            </dl>
            <dl>
                <dt>Term 7:</dt>
                <dd>Defintion for term</dd>

                <dt>Term 8:</dt>
                <dd>Definition for term</dd>

                <dt>Term 9:</dt>
                <dd>Definition for term</dd>

                <dt>Term 10:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 11:</dt>
                <dd>Definition for term</dd>

                <dt>Term 12:</dt>
                <dd>Definition for term</dd>
            </dl>
        </div>
    </body>
</html>

这是视觉效果。我设计了蓝色和红色边框，以便更容易可视化：

我的目标是让所有蓝色和红色“框”具有相同的宽度，无论文本大小设置是多少。例如。如果用户有一个默认样式表来使他们的文本非常大，它应该相应地扩展。这个问题不仅在人们使用他们自己的样式表时出现，而且在 IE6 中当人们选择“中等”以外的“文本大小”时也会出现——它使文本变大，我希望能够适应这种情况。

我认为我不想在任何“框”上设置硬宽度，并且我不希望在这两个列样式之外对文本进行任何换行或让浮动下降。

如果我不够清楚，我可以用更多图片和示例来编辑答案。

另外，这是一个相关但独立的问题。如果重新调整浏览器窗口的大小，使用表格，您会希望表格的一部分在您减小宽度时变得不再可见。使用此设置，您会得到一个非常奇怪和丑陋的结果，如下所示。如何避免这种情况？

更新

似乎没有不涉及为元素（和/或封装元素）提供固定宽度的解决方案。此外，似乎 IE6 文本调整大小只能通过将文本硬设置为像素大小而不让他们重新调整大小来解决。

【问题讨论】：

那你为什么不用一张桌子呢？
语义目的，标记表示术语和定义的列表；不是表格数据。我想将标记的语义与样式分开。据我所知，这是 dl 元素和 CSS 的目的。
表格本身并不是邪恶的，要不惜一切代价避免。它们非常适合显示、惊喜、表格数据 - 看起来确实适用于这种情况。
正如我所说，“标记代表术语和定义的列表；而不是表格数据。”无论如何，这不是一个答案，而是一个问题。我回答了我为什么不使用桌子的问题，并给出了清晰合理的答案。
然后为你的 dt 元素添加一个宽度属性： .terms dt { width:180px;文本对齐：左；边框：纯蓝色1px；清除：左； }

标签： css html tabular

【解决方案1】：

对于您的窗口大小调整问题，只需在“.terms”div 中添加宽度：

.terms{
   width:1000px;
 }

【讨论】：

我接受，没有固定宽度就没有办法做到这一点？

【解决方案2】：

您可以像这样为每个元素指定固定宽度：XXpx

http://jsfiddle.net/XKaKT/1/

【讨论】：

我接受，没有固定宽度就没有办法做到这一点？
任何可变宽度都意味着您的列将不再垂直排列，因为它们可以单独拉伸，但如果这样更有用，您可以使用这样的百分比宽度：jsfiddle.net/XKaKT/2

【解决方案3】：

DL 列表和 正确标记 两列表实际上在语义上非常等效。所以你可以在这里安全地使用表格（注意带有scope 属性的TH 元素）：

<table>
    <tr>
        <th scope="row">Term 1:</th>
        <td>Very Long definition for this term here<td>
    </tr>
    <tr>
        <th scope="row">Term 2:</th>
        <td>Definition for term<td>
    </tr>
    <tr>
        <th scope="row">Term 3 with longer term title:</th>
        <td>Definition for term<td>
    </tr>
    <!-- ... -->
</table>

如果首选使用DL，请考虑使用无序列表，其中每个项目都包含一个separate DL，其中只有一个DT/DD 组。另请参阅我的answer 到“是否有一种有效的方法可以用 HTML 元素包装 dt 和 dd？”问题。

【讨论】：

【解决方案4】：

有一个类似的问题，这里有一个解决方案，但它在很大程度上取决于每个 DT-DD 对仅适合 1 行，因此对于您的目的来说它可能很脆弱：

这里的一般策略是您希望 DL 是一个内联块，而 DT 是块，因此它们自动具有相同的宽度。这还允许您在适合您的样式的情况下右对齐所有 DT，并且您可以从 DT 控制元素之间的间距。

dl {
  line-height: 2;
  display: inline-block;
  position: relative;
}

dt {
  text-align: right;
  margin-right: 1em;
}

现在您需要将 DD 放置在 DT 的右侧，这使得它变得脆弱，因为 DD 不能很好地适应变化的内容。

dd {
  position: absolute;
  left: 100%;
  margin-top: -2em; /* negate the DL line-height */
  white-space: nowrap; /* without this, DDs will be the same length as DTs
}

请注意，在 DL 上设置宽度限制将驱动您的 DT，并且您的 DD 根据您的 DT 调整大小。

【讨论】：