文章/答案/技术大牛

发布

社区首页 >问答首页 >在整个宽度上有背景颜色，但保留一些左、右填充。

问在整个宽度上有背景颜色，但保留一些左、右填充。
EN

Stack Overflow用户

提问于 2015-06-30 08:15:48

回答 3查看 121关注 0票数 0

我在这里有一个测试网站：http://test-minimalist.weebly.com/#bbienfaits

背景色(第二页为绿色)没有填充整个宽度，因为容器类为960px。

如果我将这个容器设置为宽度= 100%，我的背景色将填充整个空间。这是完美的，但另一个问题出现了:文本也占据了整个空间，但我更喜欢有一些填充左和右。

所以我试着把padding: 0 100px;放在这个容器上，但是背景色不再填充这个空间了。

有什么想法吗？

谢谢。

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-06-30 08:47:57

删除.container宽度。向fp-tableCell添加宽度

.container {
 margin: 0 auto;
 width: auto;
}
.fp-tableCell {
 display: block;
 vertical-align: middle;
 height: 100%;
 margin: 0 auto;
 width: 960px;
}

票数 0

Stack Overflow用户

发布于 2015-06-30 08:19:53

您可以在容器中添加另一个div，它将有一个边距，而不是填充，然后将背景色设置为容器。

<div class="container">
  <div class="inner-container"></div>
</div>

.container {
  width: 100%;
  background-color: green;
}

.inner-container {
  width: 80%;
  margin: 0 auto;
}

票数 0

Stack Overflow用户

发布于 2015-06-30 08:50:37

使用此代码.itz works .container {宽度:100%}

.paragraph {位置:相对；填充-左:15 padding；填充-右:15 padding；}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31133012

复制

相似问题

问在整个宽度上有背景颜色，但保留一些左、右填充。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在整个宽度上有背景颜色，但保留一些左、右填充。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在整个宽度上有背景颜色，但保留一些左、右填充。
EN