Question

我使用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>

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

enter image description here

我的目标是让所有蓝色和红色“盒子”具有相同的宽度，无论文本大小集是什么。例如。如果用户具有默认样式表以使其文本非常大，则应相应地扩展。这个问题不仅出现在人们使用他们自己的样式表时，当人们选择“文本大小”而非“中等”时，它也出现在IE6中 - 它使文本更大，我希望能够容纳它。

我认为我不想在任何“盒子”上设置硬宽度，并且我不希望任何文本包装，或者让浮动片掉落，这两种列样式。

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

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

enter image description here

更新

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

Answer 1

DL列表和正确标记的两列表实际上与语义相当。因此，您可以在此处安全地使用表格（请注意TH属性scope元素）：

<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到“是否有一种有效的方法来包装dt和带有HTML元素的dd？”问题。

Answer 2

有一个类似的问题，这是一个解决方案，但它在很大程度上取决于只适用于1行的每个DT-DD对，因此它可能会因你的目的而脆弱：

这里的一般策略是你希望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，并根据您的DT调整您的DD。

Answer 3

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

.terms{
   width:1000px;
 }

Answer 4

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

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

使用CSS为dl和dt设置样式以模仿表格式的演示文稿

4 个答案: