css - 不相对于父级的百分比填充

Question

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

0

为什么不试试，

position:absolute;

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

于 2013-07-01T11:02:46.370 回答

2 回答 2