我正在尝试使用 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;
}
最佳答案
发生这种情况的原因是,对于 inline
或 inline-block
,元素中的空白会影响渲染(增加空间)。这是您的演示,其中删除了空格,没有更改 CSS:http://jsfiddle.net/fZXnU/
虽然删除空格不是微不足道的,所以您最好让元素 float (这会触发 display:block
)。有大量空白的工作演示:http://jsfiddle.net/fZXnU/1/
关于css - 在 CSS 中指定相对于父 DIV 的精确百分比宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8010120/