当我们在定义列表时，我们通常想得到如下的效果：

下面是我们的html代码：

  <dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>
    <dt>Email:</dt>
    <dd>lea@verou.me</dd>
    <dt>Location:</dt>
    <dd>Earth</dd>
  </dl>

实际得到的效果是

当我们想得到最上面的效果时，第一步通常是：

  <style>
    dd{
      margin: 0;
      font-weight: bold;
    }
  </style>

因为<dt>和<dd>是块级元素，所以所有的名和值都各占一行，我们可能通过改变<dt>或<dd>的display属性来做尝试：

    dd, dt{
      display: inline;
    }

解决方案

如上，我们缺少几个换行

实际上有一个Unicode字符专门代表换行符：0x000A。在CSS中，我们可以用"\A"表示，我们可以把它作为::after伪元素的内容，添加到dd的尾部，但是你会发现并没有什么作用，但这并不代表我们错了，而是在HTML代码中，默认情况下换行符会与相邻的其他空白符进行合并，我们这里保留源代码中的这些空白符和换行，因此我们这么做：

    dd, dt{
      display: inline;
    }

    dd::after{
      content: "\A";
      white-space: pre;
    }

    dd{
      margin: 0;
      font-weight: bold;
    }

很明显，我们已经得到了我们想要的效果，不过如果我们尝试如下时：

由于我们在每个dd后面都加了一个换行符，每个值都会分到单独一行，甚至不需要换行的时候也是如此。因此我们需要采取类似if else的判断：

    dd + dt::before{
      content: "\A";
      white-space: pre;
    }

    dd + dd::before{
      content: ', ';
      font-weight: normal;
      margin-left: -.25em;
    }

另外上述的margin是为了修正逗号前的空格，尺寸是需要根据字体个尺寸调试的。