Question

我正在创建一个HTML列表，当用户将鼠标悬停在列表元素上时，所选元素会通过font-size的增加而放大。
这很有效，但是放大的元素会向上/向下推动列表中的其他元素，这使得它看起来很奇怪。

如何确保其他元素不适应放大的元素？

这是我的代码：

HTML：

<ol>List:
  <div class = "center">
    <li>IT</li>
    <li>Some Element 1</li>
    <li>Some Element 2</li>
    <li>Some Element 3</li>
    <li>Websites in einer Stunde</li>
    <li>Professioneller Website Kritiker</li>
</ol>
</div>

SCSS：

li {
  list-style-type: circle;
}
li:hover{
  font-size:120%;
}
li:hover:before{
  font-size:100%;
}

Answer 1

设定固定高度

li {
  list-style-type: circle;
  height: 20px;
  margin: 0px;
  padding: 0px;
}

li:hover {
  font-size: 120%;
  height: 20px;
  margin: 0px;
  padding: 0px;
}

li:hover:before {
  font-size: 100%;
}

<ol>List:
  <div class="center">
    <li>IT</li>
    <li>Some Element 1</li>
    <li>Some Element 2</li>
    <li>Some Element 3</li>
    <li>Websites in einer Stunde</li>
    <li>Professioneller Website Kritiker</li>
  </div>
</ol>

阻止HTML列表项在悬停时调整

1 个答案: