没有正确显示data-procentage和CSS的垂直进度条

Question

我尝试使用data-procentage - 标记创建垂直进度条。到目前为止我几乎已经完成了，唯一的问题是进度条没有对齐/甚至彼此，我只是不知道为什么。

所以，这是我到目前为止所得到的：

HTML：

    ul li {
       float: left;
       list-style: none;
       margin:0 40px;
    }

    ul li a {
       text-decoration:none;
    }

    .progressbar {
       background:black;
       border-radius: 0 3px 3px 0;
       height: 30px;
       margin: 0px 0 0 0px;
       -webkit-transform: rotate(-90deg);
    }

    .title {
       color: black;
       font: 12px 'Arial';
    }

    .progressbar2 {
       border-radius: 0 3px 3px 0;
       height: 30px;
       margin: 0px 0 0 0px;
    }

    .progressbar2:after {
       content: attr(data-procentage) '%';
       color: black;
       font: 14px 'Arial';
    }

<div id="progress">
      <ul>
        <li>
            <div class="progressbar2" data-procentage="53.40"></div>
            <div class="progressbar" style="width:53.45%" data-procentage="53.40"></div>
            <a href="#"><span class="title">New York</span></a>
        </li>
        <li>
            <div class="progressbar2" data-procentage="13.25"></div>
            <div class="progressbar" style="width:13.25%" data-procentage="13.25"></div>
            <a href="#"><span class="title">Los Angeles</span></a>
        </li>
        <li>
            <div class="progressbar2" data-procentage="10.37"></div>
            <div class="progressbar" style="width:10.37%" data-procentage="10.37"></div>
            <a href="#"><span class="title">Washington D.C.</span></a>
        </li>
        <li>
            <div class="progressbar2" data-procentage="22.98"></div>
            <div class="progressbar" style="width:22.98%" data-procentage="22.98"></div>
            <a href="#"><span class="title">San Francisco</span></a>
        </li>
      </ul>
    </div>

这是一个小提琴http://jsfiddle.net/mvqg3d0n/

那么，任何人都可以帮助我吗？我真的很感激

Answer 1

在进度条中使用此css。这会将旋转原点更改为左下角，因此您必须使用平移将其向右移动30px。

-webkit-transform-origin: 0% 100%;
-webkit-transform: translate(30px,0px) rotate(-90deg);

别忘了为非webkit浏览器添加未加前缀的版本（如firefox）。

transform-origin: 0% 100%;
transform: translate(30px,0px) rotate(-90deg);

另外，请确保您的li项目的宽度相同，以使条形码尺寸正确。

我不确定你是否知道data-属性的含义。它没有设置条形的宽度，您可以像在.progressbar2类中一样使用它来存储通过css内容显示或由javascript使用的信息。 .progressbar类中不需要它（除非你在其他地方使用它）。

Answer 2

您需要将列表项设置为固定宽度。现在，列表元素的宽度取决于文本。这会使百分比条的整体宽度偏斜：

ul li {
    float: left;
    list-style: none;
    margin:0 40px;
    width: 200px;
}

我以200px为例。当然，您可以设置自己的大小。如果你想让它们全部对齐到左边，只需将它们设置为100％：

ul li {
    float: left;
    list-style: none;
    margin:0 40px;
    width: 100%;
}

Answer 3

ul li {
  display: inline-block;
  list-style: none;
  margin: 0 40px;
  text-align: center;
}
ul li a {
  text-decoration: none;
  display: block;
}
.progressbar {
  background: black;
  border-radius: 0 3px 3px 0;
  height: 30px;
  margin: 0px 0 0 0px;
  -webkit-transform: rotate(-90deg);
  display: inline-block;
}
.title {
  color: black;
  font: 12px'Arial';
}
.progressbar2 {
  border-radius: 0 3px 3px 0;
  height: 30px;
  margin: 0px 0 0 0px;
}
.progressbar2:after {
  content: attr(data-procentage)'%';
  color: black;
  font: 14px'Arial';
}

<div id="progress">
  <ul>
    <li>
      <div class="progressbar2" data-procentage="53.40"></div>
      <div class="progressbar" style="width:53.45%" data-procentage="53.40"></div>
      <a href="#"><span class="title">New York</span></a>
    </li>
    <li>
      <div class="progressbar2" data-procentage="13.25"></div>
      <div class="progressbar" style="width:13.25%" data-procentage="13.25"></div>
      <a href="#"><span class="title">Los Angeles</span></a>
    </li>
    <li>
      <div class="progressbar2" data-procentage="10.37"></div>
      <div class="progressbar" style="width:10.37%" data-procentage="10.37"></div>
      <a href="#"><span class="title">Washington D.C.</span></a>
    </li>
    <li>
      <div class="progressbar2" data-procentage="22.98"></div>
      <div class="progressbar" style="width:22.98%" data-procentage="22.98"></div>
      <a href="#"><span class="title">San Francisco</span></a>
    </li>
  </ul>
</div>