我试图使用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; }
解决方法
发生这种情况的是,使用内联或内嵌块,元素中的空白空间将影响渲染(增加空格)。这是您的演示工作与空白删除,没有更改CSS:
http://jsfiddle.net/fZXnU/
删除空格并不是微不足道的,所以你最好漂浮元素(触发显示:块)。工作演示大量的空白:http://jsfiddle.net/fZXnU/1/
原文地址:https://www.jb51.cc/css/219363.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。