HTML/CSS反向进度条

如何编程一个向右对齐且有文本的反向进度条

---

到目前为止，它一直显示，好像它是从左边开始。最初我将其编码为转换（减轻），但我找不到一种方法使其从右开始并扩展到左。

使用

float:right，使其从右侧开始

使用

HTML:

在
ul.skillbars li
上，添加
文本对齐：右

在
ul.skillbars li:after
和
ul.skillbars-r li:after
上，将
左侧
更改为
右侧

根据需要更新渐变

例如：

编辑

我误解了这个问题；我以为你想把所有的铁条都对齐，我错了

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

然后在两个
ul
s上添加：

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

在
ul.skillbars-r li上：在
之后，仍然将
左侧
更改为
右侧

好了
 嗨，恐怕我试过了，结果产生了一些不好的效果。基本上是将进度条向右推，让左边仍然是它的开始。我没有，它在大多数浏览器中兼容吗？它是否也会翻转我想要显示的文本？另外，我应该将变换放置在
本身还是整个
上？是的，实际上它会翻转文本，但您可以将其单独放置，然后按位置推动absolute@user2588644至少在Firefox25上，此代码不会生成任何类似于您的图像的内容。但也许我不太理解你的问题，因为我觉得你的问题不太清楚。@Oriol，对不起！实际上，我把它翻了回去，因为它在示例中是如何正确地对齐它们的，但它向我展示了如何做到这一点。我也试过你的方法，但是由于某种原因，漂浮物在挤压我的栅栏（我用基金会作为我的基地，所以也许这就是为什么？）不过，我确实使用了您的示例来帮助我从重复的额外变量中清理代码，所以也谢谢您@奥利奥：我也有同样的问题——不完全清楚OP是想让所有的东西都朝着正确的方向还是两个方向。你的解决方案很干净，我喜欢！。我还更新了我的，以显示两种方式。@DACrosby我最终使用了你的，因为你仍然保留了“左：右：”这似乎比在我的案例中应用浮动效果更好。是否有理由使用一个而不是另一个？我想原因可能是因为我把它们分别放在两个不同的基础柱中，它们完全填满了。我不确定这是否是最好的做法，但我就是这样做的。
.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%;
}

ul{
  display:inline-block;
}

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