我正在尝试实现UI，如图所示。然而，在尝试定位组合之后，我现在很难，但是我很无能为力。有人可以帮我弄这个吗？
<style>
.progress{
position:relative;
width:500px;
}
.bar{
}
.percent{
}
</style>
<div class="progress">
<span class="bar" width="%"></span>
<span class="percent">50%</span>
</div>
解决方法
HTML：
<div id="progress">
<span id="percent">30%</span>
<div id="bar"></div>
</div>
CSS：
#progress {
width: 500px;
border: 1px solid black;
position: relative;
padding: 3px;
}
#percent {
position: absolute;
left: 50%;
}
#bar {
height: 20px;
background-color: green;
width: 30%;
}