0

您如何编写一个向右对齐并带有文本的反向进度条？

在此处输入图像描述

到目前为止，这是我的 css，但它一直显示，好像它是从左边开始的。最初我将它编码为过渡（缓出），但我找不到让它从右侧开始并扩展到左侧的方法。

4

3 回答 3

1

演示：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%;
}
于 2013-07-16T19:15:21.907 回答
0

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

于 2013-07-16T18:54:50.747 回答
0

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

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

根据需要更新渐变。

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

编辑

我误读了这个问题；以为你想让所有的条都对齐，我的错！

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

ul{
  display:inline-block;
}

然后在两个uls 上添加：

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

上ul.skillbars-r li:after，还是left改成right。

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

于 2013-07-16T19:17:16.953 回答