为什么font-family：monospace会改变我的< dl>的布局。 [英] why does font-family: monospace changes the layout of my <dl>

问题描述

我使用

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

例如如果我删除了问题1 下面的注释，那么我会看到：

如果我删除问题2 一行下的注释，失败，但仍然不愉快看：

我想了解：

1. 为什么 font-family：monospace 布局如此之多（特别是 dd 元素）


2. 如何解决这个问题

解决方案

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

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

  dl {width：100％;溢出：隐藏;背景：＃FF0;填充：0;保证金：0; } dt {float：left; text-align：right;宽度：20％;背景：＃cc0;填充：0;保证金：0; font-weight：bold; / *问题2 * / font-family：monospace;保证金：10％; } dd {float：left; text-align：left;宽度：70％;背景：＃dd0;填充：0;保证金：0; / *问题1 * / font-family：monospace; }  

< dl> < dt> cat< / dt> dd>小型家养猫科动物< / dd> < dt>熊< / dd>大型杂食动物（顶部土地捕食者）< / dd> < dt>长颈鹿< / dt>< dd>最没用的四足动物< / dd>< / dl>

另外，如果您只想让这两个元素中的一个使用等宽字体，也可以显式设置行高：

  dl {width：100％;溢出：隐藏;背景：＃FF0;填充：0;保证金：0; } dt {float：left; text-align：right;宽度：20％;背景：＃cc0;填充：0;保证金：0; font-weight：bold; / *问题2 * / / * font-family：monospace; * /保证金 - 右侧：10％; } dd {float：left; text-align：left;宽度：70％;背景：＃dd0;填充：0;保证金：0; / *问题1 * / font-family：monospace; } dd，dt {line-height：14px; }  

< dl> < dt> cat< / dt> dd>小型家养猫科动物< / dd> < dt>熊< / dd>大型杂食动物（顶部土地捕食者）< / dd> < dt>长颈鹿< / dt>< dd>最没用的四足动物< / dd>< / dl>

I am using some code from this answer on a question of how to align dd and dt elements on the same line and the results are good.

The following code:

 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>

... produces this image:

However, when I try to apply font-family:monospace to either the dd or the dt elements the layout breaks.

E.g. if I remove the comment below the Question 1 line this is what I see:

Whereas if I remove the comment below the Question 2 line I get a less dramatic failure but still not pleasant to look at:

I would like to understand:

1. why font-family: monospace can upset the layout so much (particularly for the dd element)
2. how to fix that

解决方案

The reason is the different line-height of the fonts used. Your system's monospace font is slightly smaller than the other font used. This leads to different heights of the dd and dt elements. Now, in the first case (dd is monospace), the second dt element is below the first dd because there is like literally one pixel left of the first dt's height, so it gets placed there due to the floating.

If both are set to monospace, it looks good again because all elements have the same line-height again.

 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>

Alternatively, you can also explicitly set a line-height if you only want to have one of the two elements to use monospace font:

 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>

这篇关于为什么font-family：monospace会改变我的< dl>的布局。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！