Progress元素不尊重右边距

时间：2016-11-24 22:20:19

标签： html css css3

我试图使用我在线选择的一些技巧来设置<progress> HTML元素的样式，但我遇到了一个问题。理论上，我的CSS应根据margin-right将margin-left和10px属性设置为margin: 2px 10px;。但事实并非如此。我尝试设置的<progress>元素尊重margin-left，但不尊重margin-right。有什么建议？

代码

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<progress value="450" max="1000"></progress>
＆＃13;
＆＃13;
＆＃13;

您还可以查看我准备的the relative Codepen。

注释

  1. 将margin简写更改为单个属性没有任何区别。
  2. CSS样式表的某些部分可能有点不相关（可能是类似浏览器的样式）或者可能不是。我不知道究竟是什么导致了这个问题。
  3. 在Firefox 50和Chrome 54上测试过，两者都有同样的问题。我可以在本地和使用Codepen和提供的代码段重现问题。

4 个答案:

答案 0 :(得分：2)

您可以使用div包装进度条并添加填充。见：

.wrapper {
  display: block;
  background: red;
  width: 500px;
  padding: 10px;
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 14px;
  border: 0;
  border-radius: 1px;
  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;
  display: block;
  width: 100%;
}
/* 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 class="wrapper">
<progress value="450" max="1000"></progress>
</div>

答案 1 :(得分：2)

你错了： 尊重margin-right。如果您使用浏览器的控制台/开发人员工具检查进度条，则会发现它确实有margin-right 10px。

问题在于width: 100%。设置为百分比的width表示"a of containing block's width"。您然后将添加到该宽度的边距。因此，包含进度条的框将比包含元素大20px，因此它将溢出。

放弃width: 100%：很少需要它。你想要的是width: auto，对于所有block元素来说意味着＆＃34;在包含元素中占用尽可能多的空间＆＃34;并自动调整margin。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div style="position: relative; margin: 0px 50px;">
  <progress value="450" max="1000"></progress>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

你可以用div parent解决它，它使用margin而不是进度条。

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

答案 3 :(得分：0)

除了解决此问题的所有其他方法之外，我还发现使用calc()可以非常轻松地解决问题而不会更改width: 100%;到width: calc(100% - 20px);之间的一行 - 有些可能需要特定于浏览器的前缀来涵盖所有浏览器。

要概括此解决方案，请将20px替换为margin-left和margin-right的值之和。

progress {
  display: block;
  vertical-align: baseline;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: calc(100% - 20px);
  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>

相关问题
最新问题