CSS格式dl标签水平和垂直

Question

我的标记如下所示：

<dl>
    <dt>Item 1</dt>
    <dd>a</dd>

    <dt>Item 2</dt>
    <dd>b</dd>

    <dt>Item 3</dt>
    <dd>c</dd>

    <dt>Item 4</dt>
    <dd>d</dd>
</dl>

我想将它设计为如下所示：

我尝试了各种各样的事情，但不断回头需要更改标记。有没有办法只用CSS干净地完成这个？

Answer 1

实际上， 可以在不更改标记/ HTML的情况下获得所需的结果。

检查出来：http://codepen.io/n3ptun3/pen/dYEOYm?editors=110

<强> HTML

<dl>
    <dt>Item 1</dt>
    <dd>a</dd>

    <dt>Item 2</dt>
    <dd>b</dd>

    <dt>Item 3</dt>
    <dd>c</dd>

    <dt>Item 4</dt>
    <dd>d</dd>
</dl>

<强> CSS

dl {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

dt, dd {
  position: absolute;
  width: 100px;
  margin: 0;
  text-align: center;
}

dt {
  top: 25px;
}

dt:nth-child(3), dd:nth-child(4)  {
  left: 100px;
}

dt:nth-child(5), dd:nth-child(6)  {
  left: 200px;
}

dt:nth-child(7), dd:nth-child(8)  {
  left: 300px;
}