css - 使用 CSS 对 dl 和 dt 进行样式化以模仿类似表格的表示

标签 css html tabular

我在使用 CSS 为某些 dldt 元素设置样式时遇到以下问题。我总是喜欢使用与 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>

这是视觉结果。我设置了蓝色和红色边框的样式,以便更容易看到:

enter image description here

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

我认为我不想在任何“框”上设置硬宽度,并且我不想在这种两列样式之外进行任何文本换行,或者让 float 掉落。

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

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

enter image description here

更新

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

最佳答案

一个 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?”问题。

关于css - 使用 CSS 对 dl 和 dt 进行样式化以模仿类似表格的表示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9619077/

相关文章:

javascript - 使用 Javascript 动态调整 HTML 元素的位置

html - 当一个尺寸发生变化时,将相对定位的图像保持在底部

html - div 内的元素不调整大小

html - 为什么 Flex box 从网格中堆叠元素

javascript - 简单的 Canvas 动画: 50x50 image moving across

Scala:将表格绘制到控制台

python - 如何以表格形式和字母顺序打印字典?

html - 使用 SVG 形状创建响应式圆形标题

html - 如何使长文本适合小的 div?

join - 使用 awk 合并两个表以创建新结果