瀏覽器調整大小后，為什么我的div不調整大小？

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。 更改窗口寬度\\高度時具有自動調整大小的div可能與您的問題不完全匹配，但我認為這與您的問題有關。希望對您有所幫助。

Answer 4

您可以看到左右移除邊距，並添加ul標簽。