如何基于0-10数值计算CSS线条宽度（最大占比50%）

你的当前写法calc(50% / <?=$number?>)不符合需求，当$number=10时计算结果为5%，和你要的左侧满宽50%不符。正确的计算公式需要基于数值占10的比例来换算50%的宽度，具体如下：

正确的CSS计算式 #

width: calc(50% * <?=$number?> / 10);

• 当$number=10时：50% * 10 / 10 = 50%（左侧满宽）
• 当$number=5时：50% * 5 / 10 = 25%（一半宽度）
• 当$number=0时：50% * 0 / 10 = 0（宽度为0）

这个公式完美匹配需求，同时避免了原写法中$number=0时的除以0计算错误。

完整代码示例 #

嵌入PHP后的CSS #

#line {
  height: 10px;
  background: gray;
  position: relative;
}

#line::after {
  content: '';
  height: 10px;
  display: block;
  position: absolute;
  width: calc(50% * <?=$number?> / 10);
  background: red;
  right: 50%;
}

HTML部分 #

<div id="line"></div>

额外注意事项 #

• 确保$number的取值为0-10的数值类型，避免传入非数字值导致CSS解析失败。
• 如果需要将红色线条偏移到右侧区域，只需把right:50%改为left:50%，计算式保持不变即可。

内容的提问来源于stack exchange，提问作者Mr. Jo