我试图将 <progress>
风格化HTML 元素,使用了一些我在网上学到的技巧,但我遇到了一个问题。理论上,我的 CSS 应该设置 margin-right
和 margin-left
属性为 10px
基于 margin: 2px 10px;
.然而,事实并非如此。 <progress>
我尝试设置样式的元素尊重 margin-left
, 但不尊重 margin-right
.有什么建议么?
代码
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 10px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<progress value="450" max="1000"></progress>
您还可以查看 the relative Codepen我准备好了。
注意事项
- 更改
margin
个别属性的缩写没有任何区别。 - CSS 样式表的某些部分可能有点不相关(可能是浏览器特定样式之类的东西),也可能不相关。我不完全知道是什么导致了这个问题。
- 在 Firefox 50 和 Chrome 54 上测试了这个,两者都有同样的问题。我可以在本地重现该问题,也可以使用 Codepen 和提供的代码段重现。
最佳答案
你错了:它是尊重margin-right
。如果您使用浏览器的控制台/开发人员工具检查进度条,您会发现它确实有 10px
的 margin-right
。
问题出在 width: 100%
上。设置为百分比的 width
表示 "a of containing block's width" .然后,您将 添加 到该宽度的边距。因此,包含进度条的框将比包含的元素大 20px
,因此它会溢出。
放弃 width: 100%
:很少有必要。你在这里想要的是 width: auto
,对于所有 block
元素意味着“在包含元素中占用尽可能多的空间”并且它会自动调整 margin
。
progress {
display: block;
width: auto;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 0px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}
<div style="position: relative; margin: 0px 50px;">
<progress value="450" max="1000"></progress>
</div>
关于html - 进度元素不尊重右边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40795218/