忽略寬度可變

父填充我有一個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

忽略寬度可變

回答

相關問題