<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,
li {
margin: 0;
padding: 0;
}
div{
width: 500px;
height: auto;
display: flex;
align-items: center;
margin-top: 20%;
margin-left: 20%;
}
ul{
display: flex;
align-items: center;
white-space: nowrap;
width: auto;
height: auto;
}
ul>li{
display: inline-block;
width: 100px;
height: 100px;
background: #803300;
margin: 0 10px;
}
.sel{
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div>
<ul>
<li class="sel">1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>涓€涓皬demo锛屽彲浠ョ湅鍒帮紝绗竴涓猯i鏀惧ぇ鍚庯紝浠嶇劧鏄瀭鐩村眳涓紝涓旀病鏈夎澶栧眰婊戝姩鐩掑瓙鐨刼verflow锛歛uto灞炴€х粰褰卞搷鍒扮殑锛堝疄璐ㄤ笂杩欐槸鍥犱负flex甯冨眬+涓嶉檺瀹氶珮搴︽潵瀹炵幇鐨勶級锛涘鍥?/p>
锛屽彟澶栵紝濡傛灉浣犻渶瑕佹墍鏈塴i搴曢儴瀵归綈锛屽垯闇€瑕佺粰鏀惧ぇ鐨勯偅涓洅瀛愬姞涓妕ransfrom灞炴€э紝鏁板€煎ぇ灏忚鎯呭喌鑰屽畾锛屽苟涓旇繕瑕佸婊戝姩鐩掑瓙鎴栬€卽l鍔犱笂涓€涓猵adding灞炴€э紝浠ヤ究鐣欏嚭浣嶇Щ绌洪棿浠庤€屼繚璇佷綅绉荤殑li鑳藉鏄剧ず瀹屽叏銆?br>閭ｄ箞杩欐牱鐨勬牱寮忛€傜敤浜庡摢绉嶅満鏅憿?
鍏跺疄杩欏氨鏄竴涓劍鐐规斁澶х壒鏁堢殑涓€涓彉褰€傚綋鐒讹紝鏈夊緢澶氱被浼肩壒鏁堢殑瀹炵幇鏂瑰紡鏄湪婊戝姩鐩掑瓙涓婂姞涓€灞傝挋鐗堬紝鎴栬€呭叾浠栫殑澶勭悊鏂瑰紡锛屼絾鏄笉鑳借В鍐虫斁澶у悗鍐呭瓒呭嚭閮ㄥ垎鐨勬樉绀哄鐞嗭紝鐒跺悗灏嗙劍鐐瑰浘鏀惧埌钂欑増涓紝濡俿wiper鎻掍欢鐨勭39涓猟emo锛?br>鍙屽嚮鏀惧ぇ鍓嶏紝
鍙屽嚮鏀惧ぇ鍚?br>
涓€瀵规瘮灏辩煡閬撲箣闂寸殑鍖哄埆鍦ㄥ摢閲屼簡锛岃繖涓皬demo閫傜敤浜庡乏鍙虫粦鍔?鐐瑰嚮鏀惧ぇ鐨勯渶姹傛晥鏋溿€?br>鍐欏嚭鏉ュ垎浜粰澶у锛屽笇鏈涘鏈夐渶瑕佺殑绔ラ瀷鎻愪緵涓€鐐瑰府鍔?/p>