停止调整悬停的HTML列表项目

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>