Question

如果不使用div作为dl的直接子项，我如何得到以下代码的相同结果？

＆＃13;

dl{
    padding: 0;margin: 0;
    text-align: center;
}

dl div{
    display: inline;
    display: inline-block;
  margin-right:2%;
    width: 40%;
    vertical-align: top;
}

dl dt{
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2em;
}

dd{
  margin:0;
    text-align: justify;
    font-size: 1.2em;
}

＆＃13;

<dl>
  <div>
    <dt>Lorem ipsum dolor</dt>
    <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa. Nunc commodo, quam et commodo gravida, nisi risus vehicula tortor.
    </dd>
  </div>
  
  <div>
    <dt>Lorem ipsum dolor</dt>
    <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
    </dd>
  </div>
</dl>

＆＃13;

注意：我在这里使用的例子只有两个dt和他们的dd被div包围，实际上我需要两个以上......

Answer 1

您可以使用CSS列：

dl { -webkit-columns: 2; -moz-columns: 2; columns: 2; }

避免在元素dt和dd内部进行分组：

dt, dd { 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;  
}

在dt：

之后立即避免列中断

dt { 
    -webkit-column-break-after: avoid; 
    column-break-after: avoid;
    page-break-after: avoid;
    break-after: avoid-column;      
}

示例小提琴：https://jsfiddle.net/abhitalks/9o797s77/

示例代码段

＆＃13;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
dl {
  font-size: 1.2em;
  margin: 8px;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}
dt {
  text-transform: uppercase;
  text-align: center;
  -webkit-column-break-after: avoid;
  column-break-after: avoid;
  page-break-after: avoid;
  break-after: avoid-column;
}
dd {
  text-align: justify;
}
dt,
dd {
  margin: 8px;
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}

＆＃13;

<dl>
  <dt>Lorem ipsum dolor</dt>
  <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa. Nunc commodo, quam et commodo gravida, nisi risus vehicula tortor.
  </dd>
  <dt>Lorem ipsum dolor</dt>
  <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
  </dd>
  <dt>Lorem ipsum dolor</dt>
  <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
  </dd>
  <dt>Lorem ipsum dolor</dt>
  <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
  </dd>
</dl>

＆＃13;

修改：添加了FireFox特定的供应商前缀。使用IE11，Edge，Chrome 47和Firefox 41进行检查。

Answer 2

如何用<dl>换行并完成？

＆＃13;

dl{
    padding: 0;margin: 0;
    text-align: center;
    display: inline;
    display: inline-block;
    margin-right:2%;
    width: 40%;
    vertical-align: top;
}

dl dt{
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2em;
}

dd{
  margin:0;
    text-align: justify;
    font-size: 1.2em;
}

＆＃13;

<dl>
    <dt>Lorem ipsum dolor</dt>
    <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa. Nunc commodo, quam et commodo gravida, nisi risus vehicula tortor.
    </dd>
</dl>
<dl>
    <dt>Lorem ipsum dolor</dt>
    <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
    </dd>
</dl>

＆＃13;

Answer 3

您可以使用OP中的div解决方案。它现在是有效的HTML，请参阅https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element

dl元素

内容模型：

：零个或多个组，每个组由一个或多个dt元素组成，后跟一个或多个dd元素，可选地与支持脚本的元素混合。

或者：一个或多个div元素，可选地与支持脚本的元素混合。

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Recommended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

Answer 4

如果您希望您的页面响应更好以使用div，或者您可以通过删除div直接更改相同的代码。

<!DOCTYPE html>
<html>
<body>
<dl>
  
    <dt>Lorem ipsum dolor</dt>
    <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa. Nunc commodo, quam et commodo gravida, nisi risus vehicula tortor.
    </dd>
  
  
  
    <dt>Lorem ipsum dolor</dt>
    <dd>consectetur adipiscing elit. Donec eget dui accumsan, dapibus lacus sed, auctor massa.
    </dd>
  
</dl>
</body>
</html>

你也可以使用span，它不会改变设计，但只能覆盖用户内部的小块代码。

差异： span和div之间的区别在于span元素是内联的，通常用于一行内的一小部分HTML（例如段落内）而div（除了元素是块行（它基本上相当于在它之前和之后有一个换行符）并用于分组更大的代码块。

如何在不使用div的情况下包围dt dd标签？

4 个答案:

dl元素

内容模型：