如何设置dt和dd的样式以便它们在同一条线上？

Question

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

Answer 1

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0
  padding: 0;
  margin: 0
}

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

Answer 2

我有一个解决方案,没有使用浮动!
在 codepen上检查这个

即

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}

更新- 3 ^次 2017年1月:我已经加入柔性盒的问题基础的解决方案.检查链接的codepen中的内容并根据需要对其进行优化.谢谢!

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* set the container width*/
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

Answer 3

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

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

Answer 4

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>

Answer 5

假设您知道边距的宽度:

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

Answer 6

因为我还没有看到适用于我的用例的示例,所以这是我能够实现的最全面的解决方案.

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; display: -webkit-flex; display: flex;和flex的速记dd元素和dt元素,就像这样flex: 1 1 50%和display作为display: inline-block.但我没有测试过,所以谨慎行事.

Answer 7

您可以使用 CSS 网格：

dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

<dl>
<dt>Title 1</dt>
<dd>Description 1</dd>
<dt>Title 2</dt>
<dd>Description 2</dd>
<dt>Title 3</dt>
<dd>Description 3</dd>
<dt>Title 4</dt>
<dd>Description 4</dd>
<dt>Title 5</dt>
<dd>Description 5</dd>
</dl>

Answer 8

请参阅jsFiddle演示

我需要一个完全按照项目描述的列表,该项目显示公司的员工,左边是他们的照片,右边是信息.我设法在每个之后使用psuedo-elements完成清除DD:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

另外,我希望文本只显示在图像的右侧,而不包裹在浮动图像下(伪列效果).这可以通过在标签内容周围添加DIV带有CSS 的元素来实现.您可以省略此额外内容,但标记的内容将包含在浮动内容中.overflow: hidden;DDDIVDDDT

与它玩了一会儿后,我就能够支持多种DT每个元素DD,但不是多个DD每个元素DT.我尝试添加另一个可选类,仅在最后一个之后清除DD,但后续DD元素包含在DT元素下(不是我想要的效果......我希望DT和DD元素形成列,而额外DD元素太宽).

通过所有权利,这应该只适用于IE8 +,但由于IE7中的怪癖,它也可以在那里工作.

Answer 9

这是另一个选项，它通过显示 dt 和 dd 内联然后在 dd 之后添加换行符来工作。

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

这类似于上面 Navaneeth 的解决方案，但使用这种方法，内容不会像表格一样排列，但 dd 将在每一行上立即跟在 dt 之后，而不管长度如何。

Answer 10

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