使用CSS,我如何样式如下:

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

dt的内容显示在一列,dd的内容显示在另一列,每个dt和对应的dd在同一行?即生产出看起来像这样的东西:


当前回答

因为我还没有看到一个适用于我的用例的示例,所以这里是我能够实现的最完整的解决方案。

dd { margin: 0; } dd::after { content: '\A'; white-space: pre-line; } dd:last-of-type::after { content: ''; } dd, dt { display: inline; } dd, dt, .address { vertical-align: middle; } dt { font-weight: bolder; } dt::after { content: ': '; } .address { display: inline-block; white-space: pre; } Surrounding <dl> <dt>Phone Number</dt> <dd>+1 (800) 555-1234</dd> <dt>Email Address</dt> <dd><a href="#">example@example.com</a></dd> <dt>Postal Address</dt> <dd><div class="address">123 FAKE ST<br />EXAMPLE EX 00000</div></dd> </dl> Text

奇怪的是,它对display: inline-block不起作用。我想如果你需要设置任何dt元素或dd元素的大小,你可以将dl的显示设置为display: flexbox;显示:-webkit-flex;显示:flex;dd元素和dt元素的flex简写类似flex: 1.1 50% display为display: inline-block。但我还没有对此进行测试,所以请谨慎处理。

其他回答

我最近需要混合内联和非内联dt/dd对,通过指定类dl-inline on <dt>元素后面应该跟着inline <dd>元素。

dt.dl-inline { display: inline; } dt.dl-inline:before { content:""; display:block; } dt.dl-inline + dd { display: inline; margin-left: 0.5em; clear:right; } <dl> <dt>The first term.</dt> <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt class="dl-inline">The second term.</dt> <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt class="dl-inline">The third term.</dt> <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt>The fourth term</dt> <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> </dl >

在我的例子中,我只是想在每个dd元素后面加一个换行符。

例如,我想这样做:

<dl class="p">
  <dt>Created</dt> <dd><time>2021-02-03T14:23:43.073Z</time></dd>
  <dt>Updated</dt> <dd><time>2021-02-03T14:44:15.929Z</time></dd>
</p>

就像这个的默认样式:

<p>
  <span>Created</span> <time>2021-02-03T14:23:43.073Z</time><br>
  <span>Updated</span> <time>2021-02-03T14:44:15.929Z</time>
</p>

就像这样:

2021 - 02 - 03 t14:23:43.073z创建 2021 - 02 - 03 t14:44:15.929z更新

为了做到这一点,我使用了下面的CSS:

dl.p > dt {
  display: inline;
}

dl.p > dd {
  display: inline;
  margin: 0;
}

dl.p > dd::after {
  content: "\A";
  white-space: pre;
}

或者你可以使用这样的CSS:

dl.p > dt {
  float: left;
  margin-inline-end: 0.26em;
}

dl.p > dd {
  margin: 0;
}

我还在每个dt元素后面添加了一个冒号:

dl.p > dt::after {
  content: ":";
}

假设你知道页边距的宽度:

dt { float: left; width: 100px; }
dd { margin-left: 100px; }

如果你使用Bootstrap 3(或更早)…

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>

我需要这样做,并让<dt>内容垂直居中,相对于<dd>内容。我使用display: inline-block和vertical-align: middle

在这里查看Codepen的完整示例

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}