html - 为什么字体系列 : monospace changes the layout of my

Question

我正在使用来自 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 行下面的注释，我会得到一个不那么引人注目的失败，但看起来仍然不愉快:

我想了解:

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

Answer 1

原因是使用的字体行高不同。您系统的等宽字体比使用的其他字体略小。这导致 dd 和 dt 元素的高度不同。现在，在第一种情况下(dd 是等宽)，第二个 dt 元素在第一个 dd 下方，因为实际上只剩下一个像素第一个 dt 的高度，因此由于 float 它被放置在那里。

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

 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>