我正在尝试制作一个简单的 Css 百分比栏。
确定转到 http://htmledit.squarefree.com/ 并将其复制/粘贴到其中:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#perc {
width:667px;
border:4px solid blue;
}
#perc_in {
width:100%;
padding:3px;
font-size:17pt;
background:red;
margin:3px;
}
</style>
</head>
<body>
<div id="perc"><div id="perc_in">100%</div></div>
</body>
</html>
如您所见，内部的红色条与蓝色边框重叠...为什么？ :\
最佳答案
根据 W3C 盒模型，边距和填充添加到 <div> 的宽度.因此，宽度不是 100%，而是变得更多，并导致进度条溢出蓝色边框。
您必须更改 #perc_in 的 3px 边距到 #perc 上的 3px 填充, 并删除 #perc_in 上的填充.
这是更新后的代码(由 Blaenk 添加):
#perc {
width:667px;
border:4px solid blue;
padding:3px;
}
#perc_in {
width:100%;
font-size:17pt;
background:red;
}
关于html - CSS 百分比条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3692643/