如何使HTML的< dt >和< dd >元素保持同行

HTML的描述列表或定义列表< dl >以字典格式显示元素。在HTML中，< dt >和< dd >标签同时在< dl >标签内使用，用于定义术语或提供描述。在父定义列表中，< dd >元素用于将定义描述与使用< dt >标签括起来的同级定义术语配对。

示例

让我们看一个简单描述列表的示例。

<!DOCTYPE html>
<html>
<head>
<title>Example of a description list</title>
</head>
<body>
<p style="font-size:20px">A data definition list</p>
<dl>  
  <dt>Data term 1</dt>  
  <dd>Data definition 1</dd>  
  <dt>Data term 2</dt>  
  <dd>Data definition 2</dd> 
  <dt>Data term 3</dt>  
  <dd>Data definition 3</dd>  
  <dt>Data term 4</dt>  
  <dd>Data definition 4</dd>
</dl>  
</body>
</html>

默认情况下，<dt>元素和<dd>元素不会在同一行显示。在这个片段中，我们将讨论一些使用特定的CSS属性来强制<dt>元素和其相应的<dd>元素保持同一行的方法。

使用CSS的浮动属性

float 属性用于内容的定位和格式化。它被用来将元素定位在其容器的左侧和右侧，并且允许文本和内联元素环绕在其周围。它定义了页面的内容流动。

如果一个元素被从内容的正常流动中移除，剩余的元素将会被包含在流中。那些被绝对定位的元素会忽略该属性。可以在CSS文件中写入，也可以直接在元素的样式中指定。

语法

下面是语法 –

float: none|left|right;

其中，
* none： 它指定元素不浮动。这是默认设置。
* left： 它指定元素在容器的左侧浮动。
* right： 它指定元素在容器的右侧浮动。

示例

在这个示例中，我们使用CSS的float属性的left值，并使用百分比来设置width属性，使和保持并排。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
    <style>
      dl {
        background:lightpink;
        width: 100%;
        overflow: hidden;
      }
      dt {
        background:lavenderblush;
        float: left;
        width: 50%;

      }
      dd {
        background:lavenderblush;
        float: left;
        width: 50%;
        margin:0;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>Data term 1</dt>
      <dd>
        This line contains the definition for the data term 1.
      </dd>
      <dt>Data term 2</dt>
      <dd>
        This line contains the definition for the data term 2.
      </dd>
    </dl>
  </body>
</html>

使用::after伪元素

在CSS中， ::after 创建一个伪元素，它是所选元素的最后一个子元素。它是一个生成的内容元素，可以用于插入任何类型的内容，比如字符、文本字符串和图像。内容属性确定其值。默认情况下是内联的，和其他所有内容一样，可以进行动画、定位和浮动。

示例

在下面的例子中，我们使用清除属性与浮动，并在<dt>元素上添加了::after伪元素。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
    <style>
      dl {
        width:300px;
        border: 2px solid saddlebrown;
        padding:10px;
      }
      dt {
        float: left;
        clear: left;
        width: 80px;
        text-align: left;
      }
      dt::after {
        content: " - ";
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>Term 1</dt>
      <dd>Definition 1</dd>
      <dt>Term 2</dt>
      <dd>Definition 2</dd>
    </dl>
  </body>
</html>

使用Flexbox

Flexbox 是一种一维布局方法，允许用户将项目分布在行或列中。它擅长于对不同大小的项目进行布局，并返回最佳的布局方式。与提供固定尺寸给浏览器的方式不同，flexbox允许您提供灵活的边界来提示内容可能的显示方式。

容器的flex属性有：

flex-direction: 它定义了容器希望将项目堆叠的方向。
flex-wrap: 它指定了是否应包装flex项目。
flex-flow: 这是上述两个属性的缩写属性。
justify-content: 它用于对齐flex项目。
align-items: 它用于对齐flex项目。
align-content: 它用于对齐flex行。

项目的flex属性有：

order: 它指定了flex项目的顺序。
flex-grow: 它指定了flex项目与其他flex项目相比的扩展程度。
flex-shrink: 它指定了flex项目与其他flex项目相比的收缩程度。
flex-basis: 它指定了flex项目的默认长度。
flex: 这是上述三个属性的缩写属性。
align-self: 它指定了可选项目在弹性容器内的对齐方式。

示例

在下面的例子中，我们为<dl>元素添加了flex-flow属性，并将其值设置为”row wrap”。我们还为<dt>和<dd>元素指定了flex-basis属性，以及<dd>元素的flex-grow属性。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
    <style>
      dl {
        width:250px;
        display: flex;
        flex-flow: row wrap;
        border: 2px solid purple;
      }
      dt {
        flex-basis: 20%;
        padding: 2px 5px;
        background:indigo ;
        text-align: center;
        color: #fff;
      }
      dd {
        flex-basis: 70%;
        flex-grow: 1;
        margin: 0;
        text-align: center;
        padding: 2px 5px;
        border-bottom: 1px solid black;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>Term 1</dt>
      <dd>Definition 1</dd>
      <dt>Term 2</dt>
      <dd>Definition 2</dd>
      <dt>Term 3</dt>
      <dd>Definition 3</dd>
    </dl>
  </body>
</html>