兄弟姐妹跨度寬度混淆獲得前兄弟姐妹的百分比

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=".">89</a> 
 
     </div> 
 
     <span class="subject"> phasellus elit orci, suscipit et eros eu, consequat viverra sem. </span> 
 
    </li> 
 
</ul>

在上述例子中，我打算是設置的div.progress嵌套span元件的寬度，是div.progress箱尺寸本身的百分比。但是，從輸出中可以看出，連續的span s將它們的寬度設置爲它們的前一個兄弟的百分比。 例如在第一個項目中，55%就是id框的意思。以下35%是55%即爲ID號框的.55*.35 = 19.25%），第三個25%寬度爲.1925*.25=~5%的id框。

我怎樣才能讓兄弟跨度是父div的百分比？

替代佈局建議將非常感激。這裏的目標是顯示單個子類別（例如，critical,todo,done）佔總數的百分比，其大小基於它們疊加的項目（這裏是帶有項目ID的<a>元素）。例如，它們可能已被設定爲單個框，其將分別排列爲第一項的缺省值25%,10%和20%以及餘下的45%（灰色）。

Answer 1

我希望我能正確理解你的問題...

我會改變HTML。取消巢跨度標籤，正確關閉，並在一個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 */ 
} 

這直接在進度格放置股利。現在，您可以設置跨度的樣式。 （請注意，您可以針對邊界半徑更精確地也）：

.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="#">89</a> 
 
    </div> 
 
    <span class="subject"> phasellus elit orci, suscipit et eros eu, consequat viverra sem. </span> 
 
    </li> 
 
</ul>