html - 使用 flexbox 制作水平条形图 - 宽度未按预期工作

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>