与父项不相关的百分比％填充

Question

我有这段HT​​ML

<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计算。我希望它以元素的当前宽度而不是父框计算。

Answer 1

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

参考：http://www.w3.org/TR/CSS2/box.html#padding-properties

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

Answer 2

为什么不尝试，

<强> position:absolute;

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