前言：記得以前處理移動端橫向滑動展示都是去用js去解決的，要用js進行蠻多處理，要算li的寬度，然后還要用js設置ul盒子的寬度，又要設置最大滑動距離，最小滑動距離等等.......但是現在發現用css就能很好的解決這功能
一、直接上代碼。
-
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
-
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
-
<title>test</title>
-
<style>
-
body,ul { margin:0; padding:0;}
-
.concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; }
-
.box { white-space:nowrap; overflow-x:auto; } /*注釋1*/
-
.box::-webkit-scrollbar { width:0; height:0; display: none; } /*注釋2*/
-
li { list-style:none; display:inline-block; width:100px; line-height:30px; margin-right:10px;
-
background:#ccc; text-align:center; } /*注釋3*/
-
li:last-child { margin:0; }
-
</style>
-
</head>
-
<body>
-
<div class="concent">
-
<ul class="box"> <!-- /*注釋4*/ -->
-
<li>簡簡單單</li><li>
-
簡簡單單 </li><li>
-
簡簡單單 </li><li>
-
簡簡單單 </li><li>
-
簡簡單單 </li><li>
-
簡簡單單 </li>
-
</ul>
-
</div>
-
<script>
-
var u = navigator.userAgent;
-
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
-
var isUc = u.indexOf('UCBrowser') > -1; //uc瀏覽器
-
//var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
-
if(isAndroid&&isUc){ /*注釋5*/
-
$( '.box').on('touchstart',function(){
-
$( document).on('touchmove',function(e){
-
e.preventDefault();
-
});
-
$( document).on('touchend',function(){
-
$( document).unbind();
-
});
-
});
-
}
-
</script>
-
</body>
-
</html>
運行代碼，發現就可以實現左右滑動了。
二、注釋解析與注意事項。
注釋①，注釋③：改變li標簽為行內塊元素(inline-block)，給ul添加一個white-space:nowrap; 不讓他自動換行。再添加overflow-x:auto;讓他超出部分滾動顯示。
注釋④ : 是為了解決行內塊元素之間的默認間隙問題。（關於行內塊間隙問題可以查看【css】行內元素、行內塊元素的默認間隙問題）。
注釋②： ::-webkit-scrollbar { width:0; height:0; display: none; } 是為了解決安卓瀏覽器的滾動條問題，在iphone瀏覽器上的常規瀏覽器上不會出現橫向的滾動條，但是在安卓設備上的chrome,火狐瀏覽器等一些瀏覽器會出現滾動條，安卓設備上高版本的uc瀏覽器，qq自帶瀏覽器，微信自帶瀏覽器不會出現滾動條。（該方法無法解決火狐瀏覽器出現的滾動條，網上查找了蠻多資料，都建議js去解決這問題）。
注釋⑤：是為解決安卓設備上的uc瀏覽器一個惡心的功能，就是安卓設備上的uc瀏覽器如果打開好幾個窗口頁面。向左向右滑的時候會跳轉到其他頁面，這時就需要取消默認事件。
三、（補充）通過scrollLeft,點擊li標簽進行位置滑動
-
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
-
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
-
<title>test</title>
-
<style>
-
body,ul { margin:0; padding:0;}
-
.concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; position:relative; }
-
.box { white-space:nowrap; overflow-x:auto; position:relative; }
-
.box::-webkit-scrollbar { width:0; height:0; display: none; }
-
li { list-style:none; display:inline-block; line-height:30px; margin-right:20px;
-
background:#ccc; text-align:center; }
-
</style>
-
</head>
-
<body>
-
<div class="concent">
-
<ul class="box">
-
<li>11111111</li><li>
-
22222222 </li><li>
-
33333333 </li><li>
-
44444444 </li><li>
-
55555555 </li><li>
-
66666666 </li><li>
-
77777777 </li><li>
-
88888888 </li><li>
-
99999999 </li>
-
</ul>
-
</div>
-
<script>
-
var oBox = $('.box');
-
var oBoxWidth = $('.box').width();
-
-
oBox.find( 'li').on('click',function(){
-
var thisWidth = $(this).width();
-
var moveLeft = this.offsetLeft;
-
if(oBoxWidth<moveLeft+thisWidth){
-
oBox.animate({ scrollLeft:moveLeft});
-
} else{
-
oBox.animate({ scrollLeft:0});
-
}
-
});
-
</script>
-
</body>
-
</html>
運行代碼，就可以看到，我們點擊哪個li標簽，該li標簽就會滑到前面的位置，當我們點擊最后幾個li標簽，也不會說滑動位置過大,導致后面空白，如果我們用js解決的話，也還要去限制他的最大滑動距離，而通過css滾動，不需要擔心這問題。
