css - 在 :active without moving surrounding elements 上变大的元素

Question

我有一个由多个 span 元素组成的句子:

<span class="sentence">
    <span>First</span>
    <span>second</span>
    <span>third.</span>
</span>

当单击 span 时 (:active)，我希望它的字体变大，但不水平移动它周围的元素。

空闲

第二个词:active

我不想涉及任何 Javascript(计算元素的 :active 宽度，或像这样的 hack)，只涉及 CSS。一个解决方案是默认添加右/左填充，并在单词为 :active 时抑制它，但它不适用于所有单词长度:http://jsfiddle.net/Ampwt/1/

知道如何实现这一点吗？

Answer 1

将宽度和高度应用于您的跨度。请参阅示例 CSS。

.sentence span {
    display:inline-block;
    vertical-align:middle;
    font-size:1.5em;
    width: 170px;
    height:30px;
}
.sentence span:active {
    font-size:2em;
}