让 span 不占用或使用 space 以便在 span 消失时关闭元素不移动

Question

抱歉，标题太复杂了。想不出更好的办法。

在网页上，我将年号文本居中。还有一个 expander/collapse 功能，其中 expands/collapses 文本位于年份数字下方。 [+] 符号用于扩展文本。 [+] 符号与年份在同一行。单击 [+] 时，符号移动到扩展文本的末尾并变为 [-].

在点击[+]符号并移动到末尾的确切时间，年份（即2015）向右移动一点，以便占用一些space 被 [+] 符号使用。

我现在的问题是：有没有办法避免这种转变？换句话说，是否可以将 2015 [+] 向右移动，以便在单击 [+] 时 2015 不移动？

Link 到 JSFiddle 是 here.

Answer 1

这对我有用 Fiddle:

.yearhead {
    text-align: left;
    width: 11%;
    margin-left: auto;
    margin-right: auto;
}

当加号不存在时，2015 会居中。

Answer 2

更新CSS

.more-link{
  position: absolute;
 }

这是工作Demo

Answer 3

如果您不希望它影响您的布局，请在 [+] 上使用 position: absolute。

.year {
  position: relative;
  display: inline-block;
}
.read-more {
    position: absolute;
    top: 0;
    right: -30px;
}

Let span not take up or use space in order for close elements not to move when the span disappears