<style type="text/css">
*{margin:0;padding:0;}
.progress{height:30px;line-height:30px;margin:10px 0;border-radius:30px;background-color:#eee;border:1px #ccc solid;overflow:hidden;}
.pro-wid{width:30%;height:100%;background-color:#3191d6;text-align:right;}
.pro-num{color:#fff;padding-right:5px;}
</style>
<div class="outer">
<span style="width:200px;float:left;">555555555555</span>
<div class="progress" style="">
<p class="pro-wid" >
<span class="pro-num">30%</span>
</p>
</div>
<p>overflow:hidden起的作用,放在子元素里就能和dtcms一样的效果,另外,outer加上position:relative;是有区别的</p>
</div>