HTML / CSS反向进度条

Question

如何编制与右对齐并具有文本的反向进度条？

到目前为止

Here's my css但它仍然显示为从左侧开始。最初我把它编码为过渡（缓出），但我找不到从右边开始并向左延伸的方法。

Answer 1

DEMO ：http://jsfiddle.net/fQtnb/1/

使用

HTML：

<ul class="skillbars l">
  <li class="eight"><span>P</span></li> 
  <li class="ten"><span>I</span></li> 
  <li class="nine"><span>I</span></li> 
  <li class="eight"><span>F</span></li> 
  <li class="nine"><span>D</span></li>
</ul>
<ul class="skillbars r">
  <li class="six"><span>A</span></li> 
  <li class="nine"><span>H</span></li> 
  <li class="six"><span>W</span></li> 
  <li class="seven"><span>M</span></li> 
  <li class="eight"><span>3</span></li> 
</ul>
<div class="clear"></div>

CSS：

.clear{
    clear:both;
}

#skills {
  position: relative;
  z-index: 300;
  padding-bottom: 60px;
  -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
}

ul.skillbars {
  padding: 0;
  width: 50%;
  float:left;
}

ul.skillbars li {
  position: relative;
  line-height: 2.188em;
  margin: .5em 0;
  padding: 0 .5em;
  position: relative;
  color: white;
  text-transform: uppercase;
}

ul.skillbars.r li {
  text-align: right;
}


ul.skillbars li span {
  position: relative;
  text-transform: uppercase;
  z-index: 300;
  font-size: 1em;
}

ul.skillbars li:after {
  position: absolute;
  top: 3px;
  bottom: 3px;
  content: '';
  background-color: #104000; /* Old browsers */
}

ul.skillbars.l li:after {
left: 3px;
background-image: -moz-linear-gradient(left,  #000000 0%, #104000 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#104000)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(left,  #000000 0%,#104000 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(left,  #000000 0%,#104000 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(left,  #000000 0%,#104000 100%); /* IE10+ */
background-image: linear-gradient(to right,  #000000 0%,#104000 100%); /* W3C */

}

ul.skillbars.r li:after {
right: 3px;
background-image: -moz-linear-gradient(left,  #104000 0%, #000000 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#104000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(left,  #104000 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(left,  #104000 0%,#000000 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(left,  #104000 0%,#000000 100%); /* IE10+ */
background-image: linear-gradient(to right,  #104000 0%,#000000 100%); /* W3C */
}

ul.skillbars li.six:after {
  width: 60%;
}

ul.skillbars li.seven:after {
  width: 70%;
}

ul.skillbars li.eight:after {
  width: 80%;
}

ul.skillbars li.nine:after {
  width: 90%;
}

ul.skillbars li.ten:after {
  width: 95%;
}

Answer 2

在进度条上使用float: right;，使其从右侧开始

Answer 3

在ul.skillbars li上，添加text-align:right;。

在ul.skillbars li:after和ul.skillbars-r li:after上，将left更改为right。

根据需要更新渐变。

示例：http://codepen.io/anon/pen/hfcwB

修改

我误解了这个问题;我以为你想让所有的酒吧都对齐，我的错误！

为了让它们并排，我建议添加以下内容而不是使用float（两者都有参数，我只是不必担心clear ing）：

ul{
  display:inline-block;
}

然后在两个ul上添加：

width: 50%;
margin-left:-4px;

在ul.skillbars-r li:after上，仍然将left更改为right。

我们去！ http://codepen.io/anon/pen/BhvJI