Question

我在div里面有一个按钮，它在div内部，我试图让按钮进入并且内部div忽略父divs padding这里是我的代码

<div style="padding:10px; background:red;">
    <div style="width:100%; margin:-10px;">

      <button style="background:blue; width:100%">
        Some test text
      </button>
    </div>
  </div>

在这里可以看到https://jsfiddle.net/5sc5y4z3/。

将margin:-10px设置为左侧，但是右侧的按钮为20px短。

如何扩展它以填充父div的整个宽度？

由于

Answer 1

100％宽度不包括负边距。您需要将其添加回来：

<div style="width:calc(100%+20px); margin:-10px;">

CSS calc() is supported in all modern browsers since IE9，因此在大多数网络开发项目中都可以安全使用。

Answer 2

请改用：

HTML：

<div style="padding:10px; background:red;">
    <div style="width:100%;background-color:lime">

      <button style="background:blue; width:100%">
        Some test text
      </button>
    </div>
  </div>

Answer 3

它被剪裁了，所以你也可以使用以下方法掩盖右侧：

<强> HTML

<div style="overflow: hidden; margin:-10px;">

忽略宽度可变的父级填充

3 个答案: