html - 完成后 CSS 文本转换恢复为字体大小

Question

我在正确转换文本时遇到问题。我有一个包含五个超链接文本的列表:

<div id="listContainer">
<ul id="wordList">
    <li class="wordListItem"><a class="wordListLink" href="somewhere1.jsp">Word1</a></li>
    <li class="wordListItem"><a class="wordListLink" href="somewhere2.jsp">Word2</a></li>
    <li class="wordListItem"><a class="wordListLink" href="somewhere3.jsp">Word3</a></li>
    <li class="wordListItem"><a class="wordListLink" href="somewhere4.jsp">Word4</a></li>
    <li class="wordListItem"><a class="wordListLink" href="somewhere5.jsp">Word5</a></li>
</ul>
</div>

我使用#wordList 删除元素符号，使用#wordListItem 显示内联单词，使用#wordListLink 进行文本转换和字体属性:

.wordListLink{
    line-height: 50px;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color: white;
    font-size: 40px;
    margin-right: 30px;
}

.wordListLink:link {
    color: white;
}

.wordListLink:visited {
    color: white;
}

.wordListLink:hover {
    color: #838383;
    transform: scale(1.1);
    /*I've tried font-size: 45px but the transition moves the rest of the words over*/
}

还有一个列表容器，用于将列表移到右侧:

#listContainer {
    position: absolute;
    bottom: 0;
    right: 0;
}

我想做的是在悬停时稍微增加字体大小。但是随着 transform: scale(1.1) 文本增加，但一旦它完成增加，它就会恢复正常，而鼠标仍然悬停。由于某种原因，它不会保持在 1.1 比例。使用 font-size: 45px 的问题在于，首先，增加会移动其他单词以腾出空间，其次，它会向左和向上增加字体，而不是在所有方向上均匀增加。有人对此有解决办法吗？

Answer 1

列表项不够大，无法容纳悬停时的文本。

你应该，

1. 增加列表项的宽度，
2. 减少 font-size 的变化(比如从 1.35em 到 1.4em)，
3. 添加右边的 margin。

如果有帮助，请告诉我!