如何使div适合整个宽度？

Question

我想让类为“.shadow”的div适合整个宽度。但我无法理解。我使用的代码如下所示。

.main.容器{边距：自动；显示：表格；}.main.main内部{显示：table-cell；垂直对齐：中间；高度：100vh；文本对齐：居中；}.阴影{背景色：rgba（0，255，0，0.25）；}

<节class=“main”><div class=“container”><div class=“main-inner”><div class=“shadow”><img src=“images/broadhurst.gif”alt=“”class=“logo-img”><ul><li>格伦·布劳德赫斯特//<li>需求计算器//<li>时钟</a></li></ul></div></div></div></section>

Answer 1

你说的全宽是指整页吗？如果那是你想要的

阴影｛背景颜色：rgba（0，255，0，0.25）；宽度：100%；位置：绝对值｝

就是你要找的编辑：哦，别忘了给其他元素添加宽度：100%

Answer 2

要使div适合整个页面，您需要清除浏览器提供的默认边距，请使用此css。

抄送：

阴影{背景色：rgba（0，255，0，0.25）；宽度：100%//这样就不适合整个页面，因为默认情况下仍有边距。边距：0px；}

希望我能帮忙！

顺便说一句，实际接受的答案不正确。

Answer 3

我想你可以这样做

.main.容器{边距：自动；宽度：100%；显示：表格；}.main.main内部{显示：table-cell；垂直对齐：中间；高度：100vh；文本对齐：居中；}.阴影{背景色：rgba（0，255，0，0.25）；}

<节class=“main”><div class=“container”><div class=“main-inner”><div class=“shadow”><img src=“images/broadhurst.gif”alt=“”class=“logo-img”><ul><li>格伦·布劳德赫斯特//<li><a href=“#”>需求计算器</a></li>//<li>时钟</a></li></ul></div></div></div></section>

Answer 4

.main.容器{边距：自动；显示：表格；}.main.main内部{显示：table-cell；垂直对齐：中间；高度：100vh；文本对齐：居中；}.阴影{背景色：rgba（0，255，0，0.25）；位置：绝对；转换：转换（-50%，-50%）；宽度：100%；}

<section class=“main”>部分<div class=“container”><div class=“main-inner”><div class=“shadow”><img src=“images/broadhurst.gif”alt=“”class=“logo-img”><ul><li>格伦·布劳德赫斯特//<li>需求计算器//<li>时钟</a></li></ul></div></div></div></section>

Answer 5

您的主容器中需要“display:table”吗？

如果不是，那么这很简单。如果你需要“显示：表格”，那么请让我知道，然后会检查更多。

.main.容器{显示：块；}.main.main内部{垂直对齐：中间；高度：100vh；文本对齐：居中；}.阴影{背景色：rgba（0，255，0，0.25）；}

Answer 6

通过添加宽度：100%；到你的.shadow类中，它将是全尺寸的此外，你也可以调整身高来适应它。