Fatal编程技术网
  • css/
  • 使用CSS设置dl和dt的样式，以模拟类似表格的表示

使用CSS设置dl和dt的样式，以模拟类似表格的表示

css html

使用CSS设置dl和dt的样式，以模拟类似表格的表示,css,html,tabular,Css,Html,Tabular,我在使用CSS设计一些dl和dt元素时遇到了以下问题。我更喜欢使用与IE6/IE7和现代浏览器兼容的非常基本的CSS。我试图得到一个效果，对我来说，这应该是相当简单的实现 以下是我正在使用的初始源代码的精简版本，以尝试解决此问题： <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css">

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


试验
.术语dl{
浮动：左；
左侧填充：0px；
}
.terms dt、.terms dd{
文本对齐：居中；
边际：0px；
浮动：左；
}
.术语dt{
边框：纯蓝1px；
清除：左；
}
.条款dd{
边框：纯红1px；
右边距：40px；
左边距：40px；
}
条款
第1项：
这个术语的定义很长
第2项：
术语的定义
第3学期及较长期职称：
术语的定义
第4项：
术语的定义
第5项：
术语的定义
第6项：
术语的定义
第7项：
术语的定义
第8项：
术语的定义
第9项：
术语的定义
第10条：
这个术语的定义很长
第11条：
术语的定义
第12条：
术语的定义
这是视觉效果。我对蓝色和红色边框进行了样式设置，以便更易于可视化：

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

我不想在任何“框”上设置硬宽度，也不想在这两列样式中对文本进行任何包装，或使浮动下降

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

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

更新

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

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

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

DL列表和正确标记的两列表实际上在语义上相当等价。因此，您可以在这里安全地使用表（注意带有
范围
属性的
TH
元素）：


第1项：
这个术语的定义很长
第2项：
术语的定义
第3学期及较长期职称：
术语的定义

如果使用<代码> DL首选，请考虑使用无序列表，每个项目中包含一个完全正确的代码< D> <代码> /<代码> DD/<代码>组内。另请参见我的“是否有一种有效的方法可以用HTML元素包装dt和dd？”问题。

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

这里的一般策略是希望DL是内联块，DTs是块，这样它们自动具有相同的宽度。这还允许您右对齐所有DTs（如果适合您的样式），并控制DT中元素之间的间距

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

dt {
  text-align: right;
  margin-right: 1em;
}
现在您需要将DDs定位到DTs的右侧，这正是使其脆弱的原因，因为DDs无法很好地适应不同的内容

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上设置宽度限制将驱动您的DTs，并且DDs的大小取决于您的DTs。

为什么不使用表格呢？出于语义目的，标记表示术语和定义的列表；不是表格数据。我想把标记的语义和样式分开。据我所知，
dl
元素和CSS.Tables的目的并不是天生的邪恶，无论如何都要避免。它们很适合于显示、惊喜、表格数据，而且它看起来确实适用于这种情况。正如我所说，“标记代表一个术语和定义列表，而不是表格数据。”总之，这不是一个答案，这是一个问题。我用清晰合理的答案回答了为什么不使用表的问题。然后为dt元素添加一个宽度属性：。terms dt{width:180px；text align:left；border:solid blue 1px；clear:left；}我认为，如果没有固定的宽度，就没有办法做到这一点？任何可变的宽度都意味着您的列将不再垂直排列，因为它们可以单独拉伸，但您可以使用这样的百分比宽度，如果这使它更有用的话：我想，没有固定的宽度，就没有办法做到这一点？ 
dl {
  line-height: 2;
  display: inline-block;
  position: relative;
}

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

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
}