Question

我现在正在一个非常简单的网站上工作，它将作为我的一些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，用于附带注释，但这些注释也会随浏览器调整大小。如果有帮助，实际上是正确调整div尺寸的CSS：

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

有人知道为什么这个特定的div可能无法通过浏览器调整大小吗？

Answer 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;*/
}

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

Answer 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>

Answer 3

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

Answer 4

您可以看到删除左右边距，并添加ul标签。

浏览器调整大小后，为什么我的div不调整大小？

4 个答案: