在CSS中相对于父DIV指定精确百分比宽度

Question

我试图使用DIV元素和CSS创建一个可视化元素，它应该以下面示例的格式显示数据。

[-----50%-----|--25%--|--25%--]

当我使用以下指定的代码和CSS时，我的最终元素总是溢出到下一行，并且我指定的CSS百分比值似乎无法正确创建布局。

有人能否建议更好的方法吗？

我的HTML：

<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
    25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
    25%</div>
<div class="vi-internal-element" style="width: 50%;">
    50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
    <li>
        <div class="legend-blue">
        </div>
        Sales</li>
    <li><span class="legend-tan"></span>Processed</li>
    <li><span class="legend-grey"></span>Pending Processing</li>
</ul>

我的CSS

.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}

- Nick

Answer 1

这种情况发生的原因是使用inline或inline-block时，元素中的空格会影响渲染（增加空间）。这是您的演示，在删除空格后工作，CSS没有变化：http://jsfiddle.net/fZXnU/ 不过，删除空格并不容易，所以最好浮动元素（这会触发display:block）。带有大量空格的工作示例：http://jsfiddle.net/fZXnU/1/。

- Wesley Murch

Answer 2

你可以使用 float: left，position: relative，然后按照自己的比例定义宽度。

我修改了你的代码，使用了浮动效果： http://jsfiddle.net/Z3kdP/。

- Zack Marrapese

Answer 3

如果您删除

标签之间的空格，则它将按预期工作。

http://jsfiddle.net/TeJuU/

---

编辑：参见此问题：如何去除inline-block元素之间的空格？

如果您不想编辑html，则可以在父元素上使用font-size: 0。

http://jsfiddle.net/TeJuU/1/

- James Montagne

Answer 4

所有这些元素都带有边距和填充，百分比在计算时会产生舍入误差。因此，您需要确保设置或考虑边距对此的影响。为了解决舍入误差，通常可以让百分比总和小于100％，然后添加margin：auto以使整个元素居中。

- Rob

---

实际上它们没有边距，这是在使用inline-block时的空间问题。 - James Montagne

@JamesMontagne - 几乎所有元素默认都有边距。 - Rob

不是这样的，请在Firebug或Chrome的检查元素中查看，没有边距。 - James Montagne

@JamesMontagne - 我建议你也这样做。请注意，我并没有说所有元素都是如此，但大多数或许很多都是，包括这个例子中的ul，但我没有深入研究其余部分。 - Rob

Answer 5

你可以使用我的代码。

.visual-indicator-title{
     font-size:12px;
     font-weight:bold;
     color:#777777;
}
 .visual-indicator-holder {
     width:100%;
     background-color:#666666;
     height:28px;
     border-radius: 8px;
     display: flex;
}
 .visual-indicator-holder .vi-internal-element {
     font-size:11px;
     text-align:center;
     color:#ffffff;
     background-color:#777777;
     border-radius: 6px;
     height: fit-content;
     display: inline-block;
}
 

- Joshua Sanjuan

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community