css-浏览器缩小添加局部横向滚动条

  需要浏览器缩小出现局部滚动条说明你内容的宽度没有浏览器宽,以下css实现当浏览器横向缩小时,局部(如导航栏…)出现横向滚动条。效果如下:

  • 正常状态
    在这里插入图片描述

  • 浏览器缩小状态
    在这里插入图片描述

  当容器的宽度小于容器里面整体内容的宽度时,你可以设置容器出现横向滚动条使页面不变形。

代码如下:

<div style="width: 100%;overflow-x: auto">    --->外层容器,设置为100%,跟随浏览器宽度变化
  <div style="min-width: 1150px">            --->在这里加个div去包裹你的内容,并设置你的内容所需要的宽度
                                  			  你可以设置width或min-width:
                        					  如果你设置width,使其为屏幕宽度,如1536px,那么当容器(屏幕)的width小于1536px时,会出现滚动条,大于1536px时,那么屏幕会出现空白。
                        					  如果你设置min-width,使其能装下你的内容,如1150px,那么当容器(屏幕)宽度逐渐缩小,直至小于1150px时,会出现滚动条。
   ....
   ....
 div>
div>

你可能感兴趣的:(css)