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;
}

我想要做的是在悬停时稍微增加字体大小。但是随着变换：scale（1.1），文本增加但是一旦完成增加，它就会快速恢复正常，而鼠标仍然悬停。由于某种原因，它不会保持在1.1级。使用font-size：45px的问题在于，首先，增加移动其他单词以腾出空间，其次，它增加字体向左和向上而不是在所有方面均等。有没有人解决这个问题？

Answer 1

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

你应该，

增加列表项的width
减少font-size更改（例如从1.35em改为1.4em），
添加右margin。

如果有帮助，请告诉我！

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

1 个答案: