Question

我想实现文本缩放器功能。文字应根据单击的字母调整大小。有一个大，中，小写字母，如果单击的话应带下划线，以告知用户所选的文字大小。

#smalltext {
  font-size: 1em;
}

#mediumtext {
  font-size: 1.25em;
}

#largetext {
  font-size: 1.5em;
}

.resizer {
  margin: 15px;
}

a.resizer:hover {
  cursor: pointer;
}

.resizer-selected {
  text-decoration: underline;
  /*border-bottom: 2px solid black; */
}

<div>
  <a class="resizer resizer-selected" id="smalltext">
    <span>A</span>
  </a>
  <a class="resizer resizer-selected" id="mediumtext">
    <span>A</span>
  </a>
  <a class="resizer resizer-selected" id="largetext">
    <span>A</span>
  </a>
</div>

问题出在CSS上。如您在代码段中所见，只有第三个字母带有下划线。
第一个和第二个字母中的行超出了右边。我尝试了text-decoration: underline;和border-bottom，这是同样的问题。
大小似乎不是问题，因为我为所有三个尝试了相同的大小，但问题仍然存在

Answer 1

.resizer-selected > span {
    text-decoration: underline;
}

Answer 2

在display: inline-block;上使用.resizer将字母间距绑定到字体大小：

#smalltext {
	font-size: 1em;
}
#mediumtext {
	font-size: 1.25em;
}
#largetext {
	font-size: 1.5em;
}

.resizer {
	margin: 15px;
  display: inline-block;
}

a.resizer:hover {
	cursor: pointer;
}

.resizer-selected {
 	text-decoration: underline;
	/*border-bottom: 2px solid black; */
}

<div>
  <a class="resizer resizer-selected" id="smalltext">
    <span>A</span>
  </a>
  <a class="resizer resizer-selected" id="mediumtext">
    <span>A</span>
  </a>
  <a class="resizer resizer-selected" id="largetext">
    <span>A</span>
  </a>
</div>

字母未正确加下划线

2 个答案: