为什么 font-family: monospace 会改变我的 <dl> 的布局答案

【问题标题】：why does font-family: monospace changes the layout of my <dl>为什么 font-family: monospace 会改变我的 <dl> 的布局
【发布时间】：2016-06-01 15:27:09
【问题描述】：

我正在使用来自this answer 的一些代码来解决如何将dd 和dt 元素对齐在同一行的问题，结果很好。

以下代码：

 dl {
   width: 100%;
   overflow: hidden;
   background:#ff0;
   padding: 0;
   margin: 0;
 }
 dt {
   float: left;
   text-align: right;
   width: 20%;
   background: #cc0;
   padding: 0;
   margin: 0;

   font-weight: bold;
   /* Question 2 */
   /* font-family: monospace;  */
   margin-right: 10%;
 }
 dd {
   float: left;
   text-align: left;
   width: 70%;
   background: #dd0;
   padding: 0;
   margin: 0;
   /* Question 1 */
   /* font-family: monospace; */
 }

<dl>
  <dt>cat</dt><dd>small, domesticated  feline</dd>
  <dt>bear</dt><dd>large omnivore (top land predator)</dd>
  <dt>giraffe</dt><dd>the most useless quadruped</dd>
</dl>

... 生成此图像：

但是，当我尝试将 font-family:monospace 应用于 dd 或 dt 元素时，布局会中断。

例如如果我删除 Question 1 行下方的评论，这就是我所看到的：

而如果我删除 Question 2 行下方的评论，我会遇到不那么戏剧性的失败，但仍然不好看：

我想了解：

为什么font-family: monospace 会如此扰乱布局（尤其是dd 元素）
如何解决这个问题

【问题讨论】：

给它一个line-height

标签： html css

【解决方案1】：

原因是所用字体的行高不同。您系统的等宽字体比使用的其他字体略小。这导致dd 和dt 元素的高度不同。现在，在第一种情况下（dd 是等宽），第二个 dt 元素在第一个 dd 下方，因为在第一个 dt 的高度的左边有一个像素，所以它被放置在那里由于浮动。

如果两者都设置为等宽，它看起来又很好，因为所有元素再次具有相同的行高。

 dl {
   width: 100%;
   overflow: hidden;
   background:#ff0;
   padding: 0;
   margin: 0;
 }
 dt {
   float: left;
   text-align: right;
   width: 20%;
   background: #cc0;
   padding: 0;
   margin: 0;

   font-weight: bold;
   /* Question 2 */
   font-family: monospace;
   margin-right: 10%;
 }
 dd {
   float: left;
   text-align: left;
   width: 70%;
   background: #dd0;
   padding: 0;
   margin: 0;
   /* Question 1 */
   font-family: monospace;
 }

<dl>
  <dt>cat</dt><dd>small, domesticated  feline</dd>
  <dt>bear</dt><dd>large omnivore (top land predator)</dd>
  <dt>giraffe</dt><dd>the most useless quadruped</dd>
</dl>

或者，如果您只想让两个元素之一使用等宽字体，您也可以显式设置行高：

 dl {
   width: 100%;
   overflow: hidden;
   background:#ff0;
   padding: 0;
   margin: 0;
 }
 dt {
   float: left;
   text-align: right;
   width: 20%;
   background: #cc0;
   padding: 0;
   margin: 0;

   font-weight: bold;
   /* Question 2 */
   /* font-family: monospace; */
   margin-right: 10%;
 }
 dd {
   float: left;
   text-align: left;
   width: 70%;
   background: #dd0;
   padding: 0;
   margin: 0;
   /* Question 1 */
   font-family: monospace;
 }
 dd, dt {
   line-height: 14px;
 }

<dl>
  <dt>cat</dt><dd>small, domesticated  feline</dd>
  <dt>bear</dt><dd>large omnivore (top land predator)</dd>
  <dt>giraffe</dt><dd>the most useless quadruped</dd>
</dl>

【讨论】：

【解决方案2】：

如果您想要整个内容的等宽，请尝试将字体系列赋予 dl 这样的标签。

 dl {
   width: 100%;
   overflow: hidden;
   background:#ff0;
   padding: 0;
   margin: 0;
   font-family: monospace;
 }
 dt {
   float: left;
   text-align: right;
   width: 20%;
   background: #cc0;
   padding: 0;
   margin: 0;
   font-weight: bold;
   /* Question 2 */
   /* font-family: monospace; */
   margin-right: 10%;
 }
 dd {
   float: left;
   text-align: left;
   width: 70%;
   background: #dd0;
   padding: 0;
   margin: 0;
   /* Question 1 */
   /* font-family: monospace; */
 }

<dl>
  <dt>cat</dt><dd>small, domesticated  feline</dd>
  <dt>bear</dt><dd>large omnivore (top land predator)</dd>
  <dt>giraffe</dt><dd>the most useless quadruped</dd>
</dl>

【讨论】：