如何在縮小窗口時進行水平滾動？

Question

如何在縮小窗口時進行水平滾動？我在身體上做了overflow-x，但沒有水平滾動和元素移位 - 我不需要移位。鏈接到圖像的html和css：https://drive.google.com/drive/folders/0ByQHLazSsLs-dF9TbzJUcWdSVms?usp=sharing

Answer 1

只需設置body標籤的寬度和應用overflow-x: scroll;

body{ 
    overflow-x: scroll; 
    width: 1200px; 
} 

我希望這將正常工作適合你。

Answer 2

您可能需要將元素包裝在div中，然後使用媒體查詢。

CSS3的@media查詢將改變您的HTML在特定屏幕尺寸下的行爲方式。

body { 
 
     width:95%; 
 
     height500px; 
 
     background-color: lightgreen; 
 
} 
 
div { 
 
    width: 100px; 
 
    background: lightblue; 
 
    } 
 

 
@media screen and (max-width: 768px) { 
 
    body { 
 
     background-color: lightgreen; 
 
     
 
     
 
    } 
 
    div { 
 
    width: 800px; 
 
    background: lightblue; 
 
    overflow-x:scroll; 
 
    } 
 
}

<div> 
 
    asdfas 
 
    </div>