使用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在同一行?即生产出看起来像这样的东西:


当前回答

你可以使用CSS网格:

dl { 显示屏:网格; grid-template-专栏:重复(2,minmax(0, 1fr); 的 < dl > < dt >片名1 < / dt > < dd >风貌1 < / dd > < dt >片名2 < / dt > < dd >风貌2 < / dd > < dt >片名3 < / dt > < dd > 3 < / dd风貌> < dt >片名4 < / dt > < dd >风貌4 < / dd > < dt >片名5 < / dt > < dd >风貌5 < / dd > < / dl >

其他回答

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

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。但我还没有对此进行测试,所以请谨慎处理。

CSS网格布局

与表一样,网格布局允许作者将元素对齐为列和行。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

要更改列大小,请查看grid-template-columns属性。

dl { display: grid; grid-template-columns: max-content auto; } dt { grid-column-start: 1; } dd { grid-column-start: 2; } <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>

这里的大多数建议都是可行的,但是您应该只将通用代码放入样式表中,并将特定代码放入如下所示的html代码中。否则,您将最终得到一个臃肿的样式表。

我是这样做的:

你的样式表代码:

<style>
    dt {
        float:left;
    }
    dd {
        border-left:2px dotted #aaa;
        padding-left: 1em;
        margin: .5em;
    }   
</style>

你的html代码:

<dl>
    <dt>1st Entity</dt>
    <dd style="margin-left: 5em;">Consumer</dd>
    <dt>2nd Entity</dt>
    <dd style="margin-left: 5em;">Merchant</dd>
    <dt>3rd Entity</dt>
    <dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
    <dt>4th Entity</dt>
    <dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>

是这样的

根据对dt和dd元素的样式不同,您可能会遇到一个问题:使它们具有相同的高度。例如,如果你想在这些元素的底部添加一些可见的边界,你很可能想在相同的高度显示边界,就像在表格中一样。

一种解决方案是作弊,将每一行都设置为“dl”元素。 (这相当于在表中使用tr) 我们失去了定义列表的原始兴趣,但在对应的情况下,这是一种简单的方式来获得快速和漂亮的伪表。

CSS:

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

HTML:

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>

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

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