停止在悬停时调整 HTML 列表项答案

【问题标题】：Stop HTML list items from adjusting on hover停止在悬停时调整 HTML 列表项
【发布时间】：2018-01-10 19:05:18
【问题描述】：

我正在创建一个 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%;
}

【问题讨论】：

标签： html list sass hover styles

【解决方案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>

【讨论】：