忽略宽度可变

父填充我有一个div这是一个div里面里面一个按钮，我想有按钮和内部的div这里忽略父div的填充是我的代码忽略宽度可变

<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的整个宽度？

谢谢

来源

2016-09-29 iqueqiorio

为什么不去除那个特定容器的'padding'呢？顺便说一句如果你不能使用'calc（）'，那么也可以通过应用'position：absolute;}来忽略父代的填充。 top：0;左：0;正确：0;'给孩子。 – Aziz

100％宽度不包括负边距。你需要给它加回：

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

CSS calc() is supported in all modern browsers since IE9，因此它是安全的。大多数Web开发项目中使用。

来源

2016-09-29 17:45:28 Blazemonger

用这个代替：

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>

来源

2016-09-29 17:47:11

不解决问题。 – Aziz

它越来越修剪，所以你也可以使用以下方法来掩盖右侧：

HTML

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

来源

2016-09-29 17:52:39 Sam5487

忽略宽度可变

回答

相关问题