CSS 如何从子元素覆盖父元素的填充

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4126182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:08:13  来源:igfitidea点击:

How can I override a parent element's padding from a child

css

提问by Nathan

I have a UL nested inside a DIV, with the DIV having padding set to "0 20px". I'd like to have this one child UL overflow over the parent DIV and extend out to the page left and right. How can I do this?

我有一个 UL 嵌套在 DIV 中,DIV 的填充设置为“0 20px”。我想让这个一个孩子 UL 溢出父 DIV 并扩展到左右页面。我怎样才能做到这一点?

回答by Carson

If you are just trying to offset the padding on the div, maybe you could achieve that by doing something like this on the UL:

如果你只是想抵消 div 上的填充,也许你可以通过在 UL 上做这样的事情来实现:

margin:0 -20px;

回答by Scott

if you want the UL to expand out of the container div then you need to set the UL to have an absolute position. Dont forget to set the top and left styles to get the UL to not be up tight against the DIV as position absolute wont obey the containers div padding

如果您希望 UL 扩展到容器 div 之外,那么您需要将 UL 设置为具有绝对位置。不要忘记设置顶部和左侧样式以使 UL 不会紧贴 DIV,因为绝对位置不会遵守容器的 div 填充

回答by lotav

.full-width {
   width: 100vw;
   position: relative;
   left: 49%;
   right: 49%;
   margin-left: -50vw;
   margin-right: -50vw;
}

https://css-tricks.com/full-width-containers-limited-width-parents/

https://css-tricks.com/full-width-containers-limited-width-parents/

回答by alex29

It works in the following way:

它的工作方式如下:

#parent {
position: relative; /* important */
padding: 0 25px;
}


#child {
position: absolute; /* important */
width: 100%;
margin-left: -25px;
}