使用calc（）

Question

我想计算一个元素的宽度：

CSS：

#progressbar {
    width: 100%;
    background-color: #DDD;
    }
#progress {
    width : calc(100% / 14 * 5);
    background-color: green;
    color: white;
    text-align: right;
    white-space: nowrap;
    padding: 0.3em 0.5em 0.2em;
    margin-right: 0.5em;
    }

HTML：

<p id="progressbar"><span id="progress">Tag 5</span>von 14</p>

这是我在网上找到的许多示例的完全复制，但它不起作用（在最新版本的Firefox中）并且不验证（在https://jigsaw.w3.org/css-validator/上）：

当我使用DIV而不是P和SPAN时，代码可以工作（但仍然无法验证）。

怎么了？

Firebug告诉我宽度已经正确计算（为35.7％），但它没有应用于元素：

Answer 1

将 float：left 添加到您的css类将解决您的问题。

#progress {
width : calc(100% / 14 * 5);
background-color: green;
color: white;
text-align: right;
white-space: nowrap;
padding: 0.3em 0.5em 0.2em;
margin-right: 0.5em;
float:left;
}