不相对于父级的百分比填充答案

【问题标题】：Percentage % padding that isn't relative to the parent不相对于父级的百分比填充
【发布时间】：2013-06-28 11:19:27
【问题描述】：

我有这段 HTML

<div class="box">
   <div class="box-header">
     <h4 class="box-header-title">CONTENT</h4>
   </div>
   <!-- rest of box -->
</div>

我有这个 CSS：

.box {
  display: inline-block;
  min-width: 360px;
  position: relative;
}
.box-header {
  color: #fff;
}
.box-header-title {
  padding: 0 2%;
}

我想要的：.box.header-title 根据.box-header-title 的当前宽度而不是.box 调整它的填充

现在，如果 .box 是 500px 计算值，则填充将在 10px 计算。我希望它以元素的当前宽度计算，而不是父框。

【问题讨论】：

【解决方案1】：

你为什么不试试，

position:absolute;

并给出适当的顶部和左侧值。

【讨论】：

【解决方案2】：

根据 CSS 规范，填充的百分比值是根据元素的包含块（父元素）计算的。所以你看到的是预期的行为。

要获得所需的结果，您需要使用一些 JavaScript 或 jQuery 方法来计算所需的值。

【讨论】：

我可以稍后回到我的办公桌时提供一个 jQuery 解决方案。
嗯我明白了，所以我需要在父包装器上手动应用宽度，以便内部填充正确，对吧？
因为您将.box 定义为inline-block，所以.box 的宽度将被计算为缩小以适应。因此，除非您为 .box 的宽度指定一个固定值，否则 CSS 解析器无法确定填充 % 的计算结果。