由于填充而获得水平滚动条[重复]答案

【问题标题】：Getting horizontal scrollbar because of padding [duplicate]由于填充而获得水平滚动条[重复]
【发布时间】：2017-06-04 15:29:33
【问题描述】：

我有一个完整的 100% div，其中包含一个 h2 标签。现在，如果我放置一个填充，那么我在调整窗口大小时会得到一个滚动条。这是由于填充而发生的。 div 为 100% 宽度，最大宽度为 1002px。

如何在不减小宽度 max-width 的情况下向 h2 标签添加左填充。

HTML代码

<div id="content-home" class="clearfix">
  <h2>Biographies</h2>
</div>

演示 -- https://jsfiddle.net/squidraj/gu8xmt1g/1/

非常感谢任何帮助。

【问题讨论】：

这是因为 #content-home h2 中的填充。
已解决...使用 box-sizing。 :)

标签： html css

【解决方案1】：

.clearfix::after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

#content-home h2 {
  background: #ff2bff none repeat scroll 0 0;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  padding: 12px 0 10px 10px;
}

#content-home{
  display: inline-block;
  max-width: 1002px;
  width: 100%;
}

.container {
  display: flex;
}

<div class="container">
  <div id="content-home" class="clearfix">
  <h2>Biographies</h2>
</div>  
</div>

【讨论】：

感谢 display:flex 的东西。

【解决方案2】：

你可以降低你的宽度来解决这个问题

#content-home h2 {
  background: #ff2bff none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: normal;
  max-width: 1002px;
  padding: 12px 0 10px 10px;
  width: 99%;
}

【讨论】：