CSS：最大寬度不在最大寬度上

Question

我有簡單的CSS動畫，並且使用max-width使水平滾動條不滾動。

元素只需要可見，這在1200px內就不多不少。

我嘗試遵循最大寬度，但無法正常工作。

 section { max-width: 1200px; } .box { width: 100%; max-width: 540px; position: relative; z-index: -1; top: 0px; transform: rotate(80deg); left: 1500px; } .wave { position: absolute; opacity: .4; width: 1500px; height: 1300px; margin-left: -150px; margin-top: -250px; border-radius: 43%; } @keyframes rotate { from { transform: rotate(0deg); } from { transform: rotate(360deg); } } .wave.-one { animation: rotate 9000ms infinite linear; opacity: .1; background: #6FC4FF; } .wave.-two { animation: rotate 5000ms infinite linear; opacity: .1; background: #319DE8; } .wave.-three { animation: rotate 9500ms infinite linear; background-color: #0087E5; } 

 <section> <div class='box'> <div class='wave -one'></div> <div class='wave -two'></div> <div class='wave -three'></div> </div> </section> 

Answer 1

我使用最大寬度使水平滾動條不滾動。

您需要使用overflow-x屬性來隱藏水平滾動

section {
  overflow-x: hidden;
  width:1200px;
}

Answer 2

解決此問題的簡單方法（如果對您沒有副作用）是在body添加overflow: hidden ：

body {
  overflow: hidden;
}