为什么在跨度之前的psuedo类导致span向下移动

Question

您好我试图获得三个带标签的文本框。第三个文本框将是前两个文本框的总和。

label {
    display:block;
}
span {
    float:left;
    margin-right: 50px;
}

input {
    width:50px;
}

#total:before {
    content: "=";
    position: relative;
    top: 21px;
    left: -34px;
}

<div>
    <span>
        <label>Geeks</label>
        <input type="text" />
    </span>
    <span>
        <label>Nerds</label>
        <input type="text" />
    </span>
    <span id="total">
        <label>Total</label>
        <input type="text" />
    </span>
</div>

问题在于，在尝试将等号与文本框对齐时，整个范围随之向下移动。任何人都可以告诉我如何让等于向下移动，但将文本框保留在原来的位置。

我已尝试过绝对位置，但等于消失。

Answer 1

before元素仍在文档流中。只有float: left/right和position:absolute/fixed从流程中取出一个元素。只需添加float:left属性即可将其从流中取出。实际位置仍然由position属性控制。

label {
    display:block;
}
span {
    float:left;
    margin-right: 50px;
}

input {
    width:50px;
}

#total:before {
    content: "=";
    position: relative;
    float:left;
    top: 21px;
    left: -34px;
}

<div>
    <span>
        <label>Geeks</label>
        <input type="text" />
    </span>
    <span>
        <label>Nerds</label>
        <input type="text" />
    </span>
    <span id="total">
        <label>Total</label>
        <input type="text" />
    </span>
</div>

Answer 2

小提琴：http://jsfiddle.net/6um5hk2g/

{{1}}

Answer 3

#total:before {
content: "=";
position: absolute;
top: 21px;
left: -34px;
} 
#total{
position: relative;
}

可以做到这一点。