html - 为什么字母 M 或 W 的缩进与其他字母不同？

Question

通过这个例子来看:

HTML

<input type="checkbox" name="jour_semaine[]" id="lundi" value="Lundi"/>
<label class="checkbox-inline weekday" for="lundi" >L</label>

<input type="checkbox" name="jour_semaine[]" id="mardi" value="Mardi"/>
<label class="checkbox-inline weekday" for="mardi" >M</label>

<input type="checkbox" name="jour_semaine[]" id="mercredi" value="Mercredi"/>
<label class="checkbox-inline weekday" for="mercredi" >W</label>

<input type="checkbox" name="jour_semaine[]" id="jeudi" value="Jeudi"/>
<label class="checkbox-inline weekday" for="jeudi" >J</label>

<input type="checkbox" name="jour_semaine[]" id="vendredi" value="Vendredi"/>
<label class="checkbox-inline weekday" for="vendredi" >V</label>

CSS

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute!important;
  left: -9999px!important;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 40px;
  padding-top:6px;
  margin-bottom:20px;
  cursor: pointer;
  font-family:'arial';
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 0;
  width: 32px; height: 32px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: ' '; 
  background:#ccc;
  width:20px;
  height:20px;
  border-radius:3px;
  position: absolute;
  top: 6px; left: 6px;
  font-size: 24px;
  line-height: 0.8;
  color: #000;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.checkbox-inline{display:inline-block;}
.weekday{text-indent:-29px; margin-right:60px; font-weight:bold; }
.weekday::before{background:none!important;}
.weekday::after{z-index:-1;}

结果

我将字母负向缩进以使其在我的框内居中。如您所见，除M 外的所有字母和 W居中。

我试过很多font-family什么都没有，仍然有这个偏移量。有没有排版大师可以解释为什么这两者的行为不同？

注意这些是<label>用text-indent设置为负数。

fiddle :https://jsfiddle.net/warface/pLLr8pbq/

Answer 1

除等宽字体外，所有字符都有不同的宽度。

与其努力改变缩进，因为您已经在这些框上设置了精确的宽度，您可以设置标签宽度以匹配您的框宽度，< em>将您的文本居中，并删除您的文本缩进和左填充，它应该可以解决所有字母的对齐问题:

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-top:6px;
  margin-bottom:20px;
  cursor: pointer;
  font-family:'arial';
  width:32px;
  text-align:center;
}
.weekday{margin-right:60px; font-weight:bold; }

https://jsfiddle.net/pLLr8pbq/3/