我有四个进度条。它们应该留在灰色区域容器内。相反,它位于页脚下方,如下面的图像屏幕截图所示。
酒吧的代码是为了让我可以将它们定位在周围,而不仅仅是固定在一个区域。
这是进度条的代码:
HTML:
<section class="container">
<section class="wrapper">
<div class="meter"> <span style="width: 90%"></span>
</div>
<div class="meter"> <span style="width: 70%"></span>
</div>
<div class="meter"> <span style="width: 50%"></span>
</div>
<div class="meter"> <span style="width: 90%"></span>
</div>
</section>
</section>
CSS:
.container {
position: relative;
}
.wrapper {
position: absolute;
right: 0;
top: 90px;
}
.meter {
height: 15px;
/* Can be anything */
margin-bottom: 10px;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
width: 210px;
padding: 0px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
background-image: -webkit-linear-gradient(center bottom, rgb(43, 194, 83) 67%, rgb(84, 240, 84) 69%);
background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
background-image: -ms-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
background-image: -o-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}