栖笔处 – 君看蕙风来处

回到栖笔处

CSS 内容超出宽高出现滚动条

添加于 2021年12月28日 10时52分更新于 2021年12月29日 15时03分

#### 一、前言

------------

水平或垂直滚动条：overflow:auto;

水平滚动条：overflow-x:auto;

垂直滚动条：overflow-y:auto;

#### 二、第一种方法

------------

定义好div的宽高。这里拿水平(横向)滚动条示例。

<style>
    	div{
    		width: 100px;
    		height: 300px;
    		border: 1px red solid;
    
    		/*横向滚动条*/
    		overflow-x: auto;
    		/*一行显示*/
    		white-space: nowrap;
    	}
    </style>
    
    <div>
    	<span>君看蕙风来处,一枝生意盎然</span>
    </div>

#### 三、第二种方法

------------
这时需要定义下 `display: flex` （Flex布局）。

<style>
    	ul{
    		width: 200px;
    		height: 200px;
    		border: 1px red solid;
    
    		/*Flex布局*/
    		display: flex;
    		/*横向滚动条*/
    		overflow-x: auto;
    		/*一行显示*/
    		white-space: nowrap;
    	}
    	ul li{
    		list-style: none;
    		float: left;
    		margin-left: 30px;
    	}
    </style>
    
    <div>
    	<ul>
    		<li>李白</li>
    		<li>杜甫</li>
    		<li>白居易</li>
    		<li>孟浩然</li>
    	</ul>
    </div>

#### 四、第三种方法（推荐）

------------

常用于移动端 一行显示标签栏。

<style>
    	/*伪:.scrollbar元素 隐藏滚动条不显示*/
    	::-webkit-scrollbar {
    		width: 0em;
    	}
    	.nav{
    		text-align: center;
    		box-shadow: 0px 11px 18px 0px rgb(1 5 80 / 10%);
    		/*横向滚动条*/
    		overflow-x: scroll;
    		/*一行显示*/
    		white-space: nowrap;
    	}
    	.nav a{
    		width: 6rem;
    		display: inline-block;
    	}
    </style>
    
    <div class="nav">
    	<a href="#" class="cur">全部</a>
    
    	<a href="/mobile/news/56.html">李白</a>
    
    	<a href="/mobile/news/57.html">白居易</a>
    
    	<a href="/mobile/news/68.html">杜甫</a>
    
    	<a href="/mobile/news/7.html">孟浩然</a>
    </div>

作者：君看蕙风来处

链接：https://www.puuluu.com/b/22

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。本文为原创文章，版权归莞尔博客所有，欢迎分享本文，转载请附上原文作者、出处链接及本声明。