使用 calc() 以百分比计算宽度答案

【问题标题】：Calculating width in percentage using calc()使用 calc() 以百分比计算宽度
【发布时间】：2016-01-23 20:18:17
【问题描述】：

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

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%），但它并未应用于元素：

【问题讨论】：

父 div 应该有一个宽度，也许在你的情况下：.parent { width: 100%; }。它对我来说很好。
@ViktorMaksimov 在 w3.org 验证器中输入我的问题中的代码。它告诉你什么？是的，它适用于 DIV，如我的示例所示，但不适用于 SPAN 元素。稍后我会修改我的问题。
验证器告诉你有一个错误，因为你使用的是 CSS3。它也不适用于跨度，因为跨度需要为display: block;。您的代码没有错误。
谢谢，@ViktorMaksimov。如果我将 display: inline-block 添加到 CSS 中，它可以正常工作。（display: block 导致换行）。

标签： css width percentage calc

【解决方案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;
}

【讨论】：