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元素时，布局会中断。

E.g。如果我删除Question 1行下面的评论，这就是我看到的内容：

然而，如果我删除Question 2行下面的评论，我会得到一个不那么引人注目的失败，但仍然看起来不愉快：

我想了解：

为什么font-family: monospace会如此扰乱布局（特别是对于dd元素）
如何解决

Answer 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>

Answer 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>

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

2 个答案: