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

Question

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

我有以下问题使用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>

Run Code Online (Sandbox Code Playgroud)

这是视觉效果.我设计了蓝色和红色边框,以便更容易可视化:

在此输入图像描述

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

我认为我不想在任何"盒子"上设置硬宽度,并且我不希望任何文本包装,或者浮动体从这两个列样式中掉落.

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

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

在此输入图像描述

UPDATE

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

Answer 1

Mar*_*lin 8

一个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>

Run Code Online (Sandbox Code Playgroud)

如果DL首选使用,请考虑使用无序列表,其中每个项目包含一个单独的DLDT/DD内部的一个/ 组.另请参阅我的回答 "是否有一种有效的方法来包装带有HTML元素的dt和dd？"的问题.

Answer 2

Eve*_*ert 2

您可以为每个元素指定固定宽度：XXpx，如下所示

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

归档时间：	13 年，8 月前
查看次数：	14803 次
最近记录：	7 年，8 月前