Question

我正在尝试一个非常简单的项目列表/进度显示（非交互式，只是一个静态显示），它打算显示覆盖为进度框的各种类别，如下所示：

.plan {
   list-style: none;
}

.plan li {
    display: block;
}


.progress a {
    text-decoration: none;
}

.plan .subject {

}


.plan .progress {
    background-color: #eee;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    border-radius: 8px;
    margin-bottom: 1ex;
    position: relative;
    display: inline-block;
}


.progress span {
    height: 100%;
    border-radius: 8px 0 0 8px;
    display: inline-block;
}

.progress a {
    padding: 2px 1ex;
    display: inline-block;
}

.progress .done {
  background-color: lightgreen;
}

.progress .critical  {
  background-color: crimson;
}


.progress .todo  {
  background-color: cyan;
}

<ul class="plan">
    <li>
        <div class="progress">
            <span class="done" style="width: 55%"/>
            <span class="todo" style="width: 35%"/>
            <span class="critical" style="width: 25%"/>
            <a href=".">1234567</a>
        </div>
        <span class="subject"> lorem ipsum dolor sit amet </span>
    </li>

    <li>
        <div class="progress">
            <span class="done" style="width: 80%"/>
            <span class="todo" style="width: 50%"/>
            <a href=".">8901234</a>
        </div>
        <span class="subject"> phasellus elit orci, suscipit et eros eu, consequat viverra sem. </span>
    </li>
</ul>

在上面的示例中，我的目的是将span的嵌套div.progress元素的宽度设置为div.progress框大小本身的百分比。但是，从输出中可以看出，连续span将其宽度设置为其前一个兄弟的百分比。例如。在第一项中55%是id框的内容，如预期的那样。以下35%是55% {id}框的.55*.35 = 19.25%的{{1}}，而第三个25%宽度是id框的.1925*.25=~5%。< / p>

如何让兄弟跨度成为父div的百分比？

非常感谢备选布局建议。这里的目标是显示单个子类别（例如critical，todo，done）占总数的百分比，其大小基于它们覆盖的项目（此处为{带有项目ID的{1}}元素。例如，它们可以被设置为单独的框，其大小分别为<a>，25%和10%以及余数20%（灰色），默认为第一项。

Answer 1

我希望我能正确理解你的问题......

我会更改HTML。取消嵌套span标签，正确关闭它们并将它们包装在div中，这样可以更容易地定位它们：

<li>
    <div class="progress">
      <div class="prog-bars">
        <span class="done"></span>
        <span class="todo"></span>
        <span class="critical"></span>
      </div>
      <a href="#">1234567</a>
    </div>
    <span class="subject"> lorem ipsum dolor sit amet </span>
  </li>

然后你需要对CSS进行一些更改。

首先，给.progress一个位置：

.plan .progress {
  position: relative;
}

现在，您可以设置新课程的样式.prog-bars

.prog-bars {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  text-align: left;
  font-size: 0; /*this removes white space between spans */
}

这会将div直接放在progress div上。现在你可以设计范围了。（请注意，您也可以更精确地定位border-radius）：

.prog-bars .done {
  background-color: lightgreen;
  width: 55%;
  border-radius: 8px 0 0 8px;
}

.progress .todo {
  background-color: cyan;
  width: 35%;
}

.progress .critical {
  background-color: crimson;
  width: 5%;
  border-radius: 8px 8px 0 0;
}

现在您的链接文字已经消失。你需要给它一个z-index，以便它显示在跨度上。你还需要给它一个z-index的位置才能正常工作（我不知道为什么......）

 .progress a {
      z-index: 444;
      position: relative;
  }

<强> View Codepen

编辑：将width:auto分配给.progress，其中包含不同大小的链接文字。

.plan {
  list-style: none;
}

.plan li {
  display: block;
}

.progress a {
  text-decoration: none;
  font-family: sans-serif;
  font-size: 20px;
  z-index: 444;
  position: relative;
  padding: 2px;
  display: inline-block;
  color: #000;
}

.plan .progress {
  background-color: #eee;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
  border-radius: 8px;
  margin-bottom: 1ex;
  position: relative;
  display: inline-block;
  width: 100px;
  text-align: center;
  vertical-align: middle;
}

.prog-bars {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  text-align: left;
  font-size: 0;
}

.progress span {
  height: 100%;
  display: inline-block;
}

.prog-bars .done {
  background-color: lightgreen;
  width: 45%;
  border-radius: 8px 0 0 8px;
}

.progress .todo {
  background-color: cyan;
  width: 25%;
}

.progress .critical {
  background-color: crimson;
  width: 10%;
  border-radius: 8px 8px 0 0;
}

<ul class="plan">
  <li>
    <div class="progress">
      <div class="prog-bars">
        <span class="done"></span>
        <span class="todo"></span>
        <span class="critical"></span>
      </div>

      <a href="#">1234567</a>

    </div>
    <span class="subject"> lorem ipsum dolor sit amet </span>
  </li>

  <li>
    <div class="progress">
      <div class="prog-bars">

        <span class="done"></span>
        <span class="todo"></span>
      </div>
      <a href="#">8901234</a>
    </div>
    <span class="subject"> phasellus elit orci, suscipit et eros eu, consequat viverra sem. </span>
  </li>
</ul>

兄弟跨度宽度混淆得到前面兄弟的百分比

1 个答案: