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

Answer 1

发生这种情况的原因是inline或inline-block，元素中的空格会影响渲染（添加空间）。以下是您的演示，删除了空白区域，没有对CSS进行任何更改：http://jsfiddle.net/fZXnU/

删除空格并不是一件容易的事情，所以你最好浮动元素（触发display:block）。有大量空白区域的工作演示：http://jsfiddle.net/fZXnU/1/

Answer 2

您可以使用float: left，position: relative，然后按照百分比定义宽度。

我修改了你的代码以在这里使用float：http://jsfiddle.net/Z3kdP/。

Answer 3

如果删除div之间的空格，则按预期工作。

http://jsfiddle.net/TeJuU/

编辑：请参阅此问题：How to remove the space between inline-block elements?

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

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

Answer 4

所有这些元素都有边距和填充，以及在计算过程中产生舍入误差的百分比。因此，您需要确保设置或考虑保证金对此的影响。对于舍入误差，通常让百分比加起来小于100％，但随后增加余量：自动将整个事物置于中心位置。

在CSS中指定与父DIV相关的精确百分比宽度

4 个答案: