다른 스팬 전후 스팬 위치 설정

Question

span 위치가 정해져 있으며 (%로 표시), 그 뒤에 텍스트를 설정해야합니다. 위치는 span에 대해서만 정의됩니다.

이 이미 positionned 스팬이다

<span style="left: 50%;display:block;position:absolute;top:-20px;font-size:12px;">↓</span> 

가 실제로 ↓는 하나 개의 값을 나타 내기 위해 단지 ProgressBar의 앞에 위치되고, 따라서 50 %는 진행 막대의 중간을 나타낸다.

그래서 나는 그것을 만들려고, 텍스트를 추가했지만 작동하지 않습니다 : "전에"사용되는 텍스트와 "후"너무 변경할 수 있도록

<span style="display:inline;position:absolute;top:-20px;font-size:12px;">Before</span> 
<span style="left: 50%;display:inline;position:absolute;top:-20px;font-size:12px;">↓</span> 
<span style="display:inline-block;position:absolute;top:-20px;font-size:12px;">After</span> 

이 앱은 여러 언어에 우리 괜찮다고 말할 수는 없지만 "Before text"는 10 픽셀을 사용하므로 스티커가됩니다.

화살표가 정확히 자리를 잡아야합니다! 사전에

덕분에 @Robert 당신의 질문에 대한

Answer 1

you could try something of the sort, just try to style it as your choice 
<style> 
#container{ width:300px; position:relative; height:30px;} 
label{float:left;} 
#1 { width:5%;} 
#2 {width:10%; position:absolute; left:50%;} 
</style> 

<div id="container"> 
<div> 
<label id="1">befoure</label ><label id="2">arrow</label><label id="3">After</label> 
</div> 
</div>