使用CSS和HTML的进度栏布局 [英] Progress bar layout using CSS and HTML

问题描述

我想实现UI如图所示。但是我没有努力的时间，尝试组合的定位，现在我无能。有人可以帮我解决这个问题吗？

I am trying to achieve UI as shown in the image. However I am having little hard time after trying combinations of positioning now I am clueless. Can someone help me with this?

<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%;
}

此处示例： http://jsfiddle.net/WawPr/

这篇关于使用CSS和HTML的进度栏布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！