兄弟スパン幅の混乱が前の兄弟の割合を取得

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ボックスサイズ自体の割合であることが、div.progressのネストされたspan要素の幅を設定することです。しかし、出力に見られるように、連続するspanは、幅を前の兄弟の割合に設定します。 など。最初の項目では、55%は意図したとおりにIDボックスのものです。次の35%はidボックスの.55*.35 = 19.25%である55%のものであり、idボックスの第3の25%の幅は.1925*.25=~5%である。

兄弟スパンを親divの割合にするにはどうすればよいですか？

代替レイアウトの提案は非常に高く評価されます。ここでの目的は、オーバーレイしたアイテムに基づいたサイズ（ここでは<a>のアイテムIDを持つエレメント）を合計したもののパーセンテージとして、個々のサブカテゴリ（例：critical、todo、done）をパーセンテージで表示することです。たとえば、最初の項目では、それぞれ25%,10%、20%、残りの部分は45%（灰色）に整列する個々のボックスとしてサイズ指定できました。

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; 
} 

今、あなたは、これが進行divの上に直接div要素を配置.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インデックスが正しく動作するための位置を与える必要が

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

View Codepen

EDIT：.progressから割り当てwidth:autoが、その意志さまざまなサイズのリンクテキストに対応します。あなたの例ではうまく動作

.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>