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

htmlweb developmentfront end technology更新于 2025/3/27 1:48:17

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 属性

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

如果将元素从正常的内容流中移除，其余元素将包含在流中。绝对定位的元素将忽略此属性。它可以写在 CSS 文件中，也可以直接在元素样式中指定。

语法

以下是语法 –

float: none|left|right;

其中，

none: 指定元素不浮动。这是默认设置。
left: 指定元素浮动在容器左侧。
right: 指定元素浮动在容器右侧。

示例

在此示例中，我们使用 CSS float 属性的 left 值，并使用百分比作为 width 属性，以使 <dt> 和 <dd> 保持并排。

<!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 会创建一个 伪元素，作为所选元素的最后一个子元素。它是一个生成的内容元素，可用于插入任何类型的内容，例如字符、文本字符串和图像。content 属性决定了它的值。它默认为内联元素，并且像所有其他内容一样，可以进行动画处理、定位和浮动。

示例

在下面的示例中，我们将 clear 属性与浮动元素结合使用，并在 <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-direction: 定义容器堆叠弹性项目的方向。
flex-wrap: 指定弹性项目是否应被包裹。
flex-flow: 是上述两个属性的简写属性。
justify-content: 用于对齐弹性项目。
align-items: 用于对齐弹性项目。
align-content: 用于对齐弹性行。

弹性项目的属性包括:

order: 指定弹性项目的顺序。
flex-grow: 指定弹性项目相对于其他弹性项目增长的程度。
flex-shrink: 指定弹性项目相对于其他弹性项目收缩的程度。
flex-basis: 指定弹性项目的默认长度。
flex: 是上述三个属性的简写属性。
align-self: 指定所选项目在弹性容器内的对齐方式。

示例

在下面的示例中，我们添加了带有"row"的 flex-flow 属性为 <dl> 元素指定"flex-bash"值。我们还为 <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>