css 控制橫向佈局，超出隱藏，滾動

時間 2019-11-18

標籤 css 控制橫向佈局超出隱藏滾動欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <style>
		li{
			list-style: none;
		}
		.box1{
			width: 400px;
			height: 100px;
			overflow-y: hidden;
			overflow-x: scroll;
			/* position: relative; */
		}
	   .box2{
			display: flex;
			/* position: absolute; */
		 }
		 .box2 li{
			 width: 50px;
			 height: 50px;
			 flex-shrink: 0;
			 line-height: 50px;
			 background: red;
			 margin: 15px;
			 text-align: center;
			 color: #fff;
		 }
  </style>
</head>
  <body>
	<div class="box1">
		<ul class="box2">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</div>  
  </body>
</html>

　　代碼中，第一種可使用 position: absolute;給box2，其父元素使用相對定位，使得box2的子元素能夠橫向滾動，改變display:flex佈局的自適應；
　　
　　第二種是使用 flex-shrink: 0; 讓其display:flex；不在收縮寬度；html

相關標籤/搜索