使用不按预期工作的柔性盒宽度制作水平条形图

Question

我试图通过将ul与flexbox网格相结合来创建水平条形图。由于某些原因，我的li没有根据它们的宽度与图表上正确的行对齐(它是接近的，但略有偏离)：

​

section {
  width:300px;
  position:relative;
}
ul {
    list-style-type:none;
    padding:0;
    margin:0;
    padding:10px 0;
}
  ul li {
      background:red;
      color:#fff;
      font-weight:700;
      margin-top:10px;
  }
      ul li:first-child {
          margin-top:0;
      }
div {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    flex: 1;
    z-index:-1;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding:inherit;
}
    div span {
        width: 1px;
        height: 100%;
        background: grey;
        position:relative;
    }

<section>
  <ul>
      <li style="width:100%;">Lorem</li>
      <li style="width:90%;">Ipsum</li>
      <li style="width:30%;">Dolor</li>
      <li style="width:60%;">Sit</li>
      <li style="width:70%;">Emet</li>
      <li style="width:10%;">Lorem</li>
      <li style="width:80%;">Ipsum</li>
      <li style="width:50%;">Dolor</li>
  </ul>
  <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
</section>

​

宽度为100%的li工作正常，但其他的不正确地排列在图表上。

Answer 1

考虑一下背景，这样做，而不是大量的代码：

​

ul {
  list-style-type: none;
  width: 300px;
  margin: 0;
  padding:0 0 10px;
  overflow:auto;
  background:
    repeating-linear-gradient(to right,
      transparent 0 calc(100% - 1px),grey calc(100% - 1px) 100%) 
      0 /calc(100%/10) 100%;
  border-left:1px solid grey;
}

ul li {
  background: red;
  color: #fff;
  font-weight: 700;
  margin-top: 10px;
}

<ul>
  <li style="width:100%;">Lorem</li>
  <li style="width:90%;">Ipsum</li>
  <li style="width:30%;">Dolor</li>
  <li style="width:60%;">Sit</li>
  <li style="width:70%;">Emet</li>
  <li style="width:10%;">Lorem</li>
  <li style="width:80%;">Ipsum</li>
  <li style="width:50%;">Dolor</li>
</ul>

​

它将具有响应性，并且您可以轻松地将其缩放到任意数量的行：

​

ul {
  list-style-type: none;
  width: 300px;
  margin: 5px;
  padding: 0 0 10px;
  overflow:auto;
  background:
    repeating-linear-gradient(to right,
      transparent 0 calc(100% - 1px),grey calc(100% - 1px) 100%) 
      0 /calc(100%/var(--n,10)) 100%;
  border-left:1px solid grey;
}

ul li {
  background: red;
  color: #fff;
  font-weight: 700;
  margin-top: 10px;
}

<ul>
  <li style="width:100%;">Lorem</li>
  <li style="width:30%;">Dolor</li>
  <li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:15;width:400px">
  <li style="width:100%;">Lorem</li>
  <li style="width:30%;">Dolor</li>
  <li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:20;width:400px">
  <li style="width:100%;">Lorem</li>
  <li style="width:30%;">Dolor</li>
  <li style="width:50%;">Dolor</li>
</ul>

​

这里有一个不同的语法：

​

ul {
  list-style-type: none;
  width: 300px;
  margin: 5px;
  padding: 0 0 10px;
  overflow:auto;
  background:
    repeating-linear-gradient(to right,
      transparent 0 calc(100%/var(--n,10) - 1px)
      ,grey calc(100%/var(--n,10) - 1px) calc(100%/var(--n,10)));
  border-left:1px solid grey;
}

ul li {
  background: red;
  color: #fff;
  font-weight: 700;
  margin-top: 10px;
}

<ul>
  <li style="width:100%;">Lorem</li>
  <li style="width:30%;">Dolor</li>
  <li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:15;width:400px">
  <li style="width:100%;">Lorem</li>
  <li style="width:30%;">Dolor</li>
  <li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:20;width:400px">
  <li style="width:100%;">Lorem</li>
  <li style="width:30%;">Dolor</li>
  <li style="width:50%;">Dolor</li>
</ul>

​

Answer 2

再添加一对跨度标签。

目前，只有9 (9)之间的10%灰色水平栏空白。

Answer 3

这可能是一种更简单的方法：

​

.container {
  display: flex;
  flex-flow: column wrap;
  background-color: lightgray;
  margin: 5%;
  padding: 1%;
  width: 86vw;
}

.sidebar {
  background-color: lightskyblue;
  flex-grow: 1;
  margin: 1%;
  padding: 0.5%;
  height: 10vh;
  text-align: center;
}

.sb1 {
  flex-grow: 0;
  width: 50%;
}

.sb2 {
  flex-grow: 0;
  width: 70%;
}

.sb3 {
  flex-grow: 0;
  width: 80%;
}

.sb4 {
  flex-grow: 0;
  width: 30%;
}

.sb5 {
  flex-grow: 0;
  width: 40%;
}

    <div class="container">
        <div class="sidebar sb1"></div>
        <div class="sidebar sb2"></div>
        <div class="sidebar sb3"></div>
        <div class="sidebar sb4"></div>
        <div class="sidebar sb5"></div>
    </div>

​