表示子元素为父元素的分数背景宽度

Question

我试图在栏内直观地表示民意调查的结果。

我无法正确地将分数栏显示为项目。

到目前为止我写的是:

#poll {
max-width: 480px;
}
.score {
float: right;
}
.item {
border: 1px solid grey;
padding: 5px;
margin: 3px 0;
}
.bar {
display:block;
background: #61CE3C;
height: 100%;
position: relative;
z-index: -1;
}

<div id="poll">
<div class="item">
<span class="bar" style="width:84.6%;"> </span>
<span class="title">More than 10</span>
<span class="score">84.6%</span>
</div>
<div class="item">
<span class="bar" style="width:0;"> </span>
<span class="title">Between 5 and 10</span>
<span class="score">0%</span>
</div>
<div class="item">
<span class="bar" style="width:15.4%;"> </span>
<span class="title">Less than 5</span>
<span class="score">15.4%</span>
</div>
</div>

如何显示标题和分数后面的背景栏作为父项目的分数宽度?

Answer 1

简单使用背景线性渐变:

#poll {
max-width: 480px;
}
.score {
float: right;
}
.item {
border: 1px solid grey;
padding: 5px;
margin: 3px 0;
}

<div id="poll">
<div class="item" style="background: linear-gradient(to right, #a6e2ae 84.6%, transparent 0px);">
<span class="title">More than 10</span>
<span class="score">84.6%</span>
</div>
<div class="item" style="background: linear-gradient(to right, #a6e2ae 0%, transparent 0px);">
<span class="title">Between 5 and 10</span>
<span class="score">0%</span>
</div>
<div class="item" style="background: linear-gradient(to right, #a6e2ae 15.4%, transparent 0px);">
<span class="title">Less than 5</span>
<span class="score">15.4%</span>
</div>
</div>

Answer 2

您可以给item一个柔性显示并移除z-index:-1

#poll {
max-width: 480px;
}
.item {
border: 1px solid grey;
padding: 5px;
margin: 3px 0;
width: 100%;
display: flex;
}
.score {
margin-left: auto;
}
.bar {
background: #61CE3C;
}

<div id="poll">
<div class="item">
<span class="bar" style="width:84.6%;"> </span>
<span class="title">More than 10</span>
<span class="score">84.6%</span>
</div>
<div class="item">
<span class="bar" style="width:0;"> </span>
<span class="title">Between 5 and 10</span>
<span class="score">0%</span>
</div>
<div class="item">
<span class="bar" style="width:15.4%;"> </span>
<span class="title">Less than 5</span>
<span class="score">15.4%</span>
</div>
</div>