html - 为什么span之前的伪类导致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>