如何设置子元素宽度为父元素百分比，实现投票结果进度条背景效果

你只需要修改部分CSS属性即可实现需求，修改后的完整代码如下：

调整后的CSS代码 #

#poll {
  max-width: 480px;
}

.score {
  float: right;
  /* 新增：提升文字层级，避免被进度条遮挡 */
  position: relative;
  z-index: 1;
}

.title {
  /* 新增：提升文字层级，避免被进度条遮挡 */
  position: relative;
  z-index: 1;
}

.item {
  border: 1px solid grey;
  padding: 5px;
  margin: 3px 0;
  /* 新增：设置为相对定位，作为进度条的定位基准 */
  position: relative;
}

.bar {
  display:block;
  background: #61CE3C;
  height: 100%;
  /* 修改：改为绝对定位，脱离文档流不挤压文字 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

HTML代码无需改动，保持原有结构即可 #

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

调整逻辑说明 #

• 原代码中.bar使用相对定位，仍然占据文档流空间，会把后续的标题、得分元素挤到下一行，是显示异常的核心原因
• 给.item添加相对定位后，.bar的绝对定位会以.item的左上角为原点，宽度设置的百分比直接对应.item的宽度比例，完全符合需求
• 给文字元素设置更高的z-index，确保文字始终显示在进度条上方，不会被背景色覆盖

内容的提问来源于stack exchange，提问作者user16742120