为什么在span导致跨度下移之前的psuedo class

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/

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

input { 
    width:50px; 
} 

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

Answer 3

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

可以做的伎俩。