当浏览器调整大小时，为什么我的 div 不会调整大小？答案

【问题标题】：Why won't my div resize when the browser resizes?当浏览器调整大小时，为什么我的 div 不会调整大小？
【发布时间】：2018-07-13 14:09:08
【问题描述】：

我现在正在开发一个非常简单的网站，它将作为我的一些 HTML 和 CSS 工作的字典。我在页面上有一个用于 CSS 术语的 div。当我缩小浏览器时，页面上的所有其他内容都会缩小，但这个 div 会移动到最右边并且变得不那么宽。高度保持不变，但 div 的宽度变薄。 div中的单词流出，这会导致滚动条出现。

目前，我的 HTML 如下所示：

 .terms {
      list-style-position: inside;
      background-color: powderblue;
      box-shadow: 10px 10px 15px dimgray;
      padding: 20px;
      margin-left: 370px;
      margin-right: 370px;
    }

<div class="terms">
  <h2> CSS PROPERTIES: </h2>
    <ul>
     <li> <span class="def"> text-align </span> - left, center, right </li>
    </ul>
</div>

我页面上的其他元素是段落，它们都会调整大小。我在页面上有 2 个其他 div 用于侧面 cmets，但那些也可以通过浏览器调整大小。如果有帮助，这是实际正确调整大小的 div 的 CSS：

.notes{
      text-align: center;
      padding: 20px;
      font-weight: bold;
      border: 10px dotted navy;
      display: inline-block;
    }

有谁知道为什么这个特定的 div 可能不会随着浏览器调整大小？

【问题讨论】：

请添加
标签包裹 li

标签： html css browser

【解决方案1】：

问题是您在 div 中添加了以下样式：

.terms {
  list-style-position: inside;
  background-color: powderblue;
  box-shadow: 10px 10px 15px dimgray;
  padding: 20px;
  /*Removing the margins from left and right
  margin-left: 370px;
  margin-right: 370px;*/
}

删除这些样式将解决您的问题

【讨论】：

【解决方案2】：

你也可以试试max-width

.terms {
  list-style-position: inside;
  background-color: powderblue;
  box-shadow: 10px 10px 15px dimgrey;
  padding: 20px;
  max-width: 1160px;
  margin: 0 auto;
}

.notes {
  text-align: center;
  padding: 20px;
  font-weight: bold;
  border: 10px dotted navy;
  display: inline-block;
}

<div class="terms">
  <h2> CSS PROPERTIES: </h2>
  <ul>
    <li> <span class="def"> text-align </span> - left, center, right </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

尝试在你的 CSS 中使用 % 或 vh 而不是 px。 A div with auto resize when changing window width\height 可能与您的问题不完全匹配，但我认为它与您的问题相关。我希望这会有所帮助。

【讨论】：

【解决方案4】：

可以看到去掉左右边距，添加ul标签。

【讨论】：