知识储备

dl/dd/dt
dl 标签定义了定义列表（definition list）
dt 标签定义了定义列表中的项目
dd 在定义列表中定义条目的定义部分。
::after/::before
::after 选择器在被选元素的内容后面插入内容
::before 选择器在被选元素的内容前面插入内容

小练习

实现常用的自定义列表：

自定义列表

html

<dl>    
  <dt>Name:</dt>    
  <dd>bao</dd>
  <dt>Email:</dt>      
  <dd>bao@example.com</dd>        
  <dd>baobaobao@example.com</dd>          
  <dt>Location:</dt>
  <dd>Earth</dd>
</dl>

css

dl,dd,dt{ 
  margin: 0;
}
dl{ 
  padding: 2em; 
  border: 2px solid #cccccc;
}
dd,dt{    
  display: inline;
}
dd{   
 font-weight: bold;
}

dt:not(:first-child)::before{ 
   content: '\a'; 
   white-space: pre;
}

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

对上述的换行代码理解：

dt:not(:first-child)::before{ 
   content: '\a'; 
   white-space: pre;
}

我们需要在每一个dd后或者 dt前加入一个换行符。
为什么选择在dt前加入换行？
因为我们有时希望一个dt对应多个dd ,例如上图的邮箱选项。如果每个dd后加换行，则又不符合我们的效果了！
而此时也会随之产生一个小问题，第一个dt我们并不希望他前面有换行，所以通过:not(:first-child)来进行过滤

更合理的设置
我们希望多个dd间用，分隔
所以我们加入了以下代码

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

dd+dd 用兄弟选择器来选中与dd相邻的下一个dd

那应用到我们更常用的表单呢？
这里我也做了尝试，但是因为我们常常需要这样的效果：

理想的效果

而非下面的样子：

不是理想的效果

于是这种方法便显得比较尴尬，因为当我们需要设置label为text-align:right（当lable不是内联元素，有宽时有效）

如此一想，我们设置display：inline-block不就解决了么？

我们仔细思考一下，当我们设置了display：inline-block,换行失效了

content: '\a';
white-space: pre;

当然我们可以用其他方法来实现，但是html结构略显得复杂了，我给出了自己的一种方法：
html

<form>    
<ul>      
    <li>       
      <label for="username">Username:</label>                  
      <input id="username" type="text" placeholder="your name">
    </li>   
    <li>    
      <label for="email">Email:</label>            
      <input id="email" type="email" placeholder="xxx@example.com">  
    </li>     
    <li>     
       <label for="phone">Telephone Num:</label> 
       <input id="phone" type="number" placeholder="input your telephone num">    
    </li>  
  </ul>
</form>

效果：