如何样式dt和dd，使他们在同一行?

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

当前回答

我需要这样做，并让<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;
  } 
}

2015-07-16 14:05:55

其他回答

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

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

2012-11-14 00:56:48

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

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

2015-08-17 08:17:28

这里的大多数建议都是可行的，但是您应该只将通用代码放入样式表中，并将特定代码放入如下所示的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>

是这样的

2012-08-20 03:03:49

这适用于IE7+，符合标准，并允许不同的高度。

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>

请参阅JSFiddle。

2014-07-01 23:39:54

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

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

2012-06-15 09:09:13

如何样式dt和dd，使他们在同一行?

推荐文章

最新文章

标签