前言：
在項目開發中，遇到了一個需求，實現一行上的導航欄過多使其產生橫向滾動條。一開始做項目，給的時間太短又著急，覺得網上有現成的，去搜發現沒有，只好自己去寫，一開始用的是平常css+js實現功能，之后學習了flex布局，所以又想到了用flex實現橫向滾動條。兩種方法，記錄下來，供以后借鑒。
正文：
兩種方法各有各的好處，如果不考慮兼容性問題，還是用flex吧，畢竟還是喜歡那一句話：Write Less，Do More。哈哈
html：
<div class="nav_wrap"> <ul class="nav_mine"> <li class="nav_item">全部</li> <li class="nav_item">Adobe</li> <li class="nav_item">微軟</li> <li class="nav_item">會計</li> <li class="nav_item">繪畫</li> <li class="nav_item">Adobe</li> <li class="nav_item">微軟</li> <li class="nav_item">會計</li> <li class="nav_item">繪畫</li> </ul></div><script src="node_modules/jQuery/tmp/jquery.js"></script>
一 原始css + jquery 實現橫向滾動條（原生js可以實現，為了方便才用的jQuery）
css：
* { box-sizing: border-box; margin: 0; padding: 0}.nav_wrap{ overflow-x: scroll;}.nav_mine { padding: 15px 10px; border-bottom: 1px solid #aca9a7; height: 75px; overflow-x: scroll; overflow-y: hidden;}.nav_mine .nav_item { border: 1px solid #1a110b; border-radius: 40px; color: #aca9a7; margin-right: 10px; font-size: 24px; padding: 4px 18px; float: left; list-style: none;}js代碼：
$(function(){ var width = 0; for (let i = 0; i < $('.nav_item').length; i++) { width += $('.nav_item').eq(i).outerWidth(true); } $('.nav_mine').width(width+20); //width只是內容的寬度，需要加上padding的寬度})PS：為什么用js，是因為不知道tabs有多少個，不能把寬度寫死，只能動態獲取tabs的寬度，然后相加，獲取總寬度，方便多次使用。outerWidth加上參數true，代表包含了padding+margin+border的寬度。
二 css3 -- flex
css:
* { box-sizing: border-box;}.nav_mine { padding: 15px 20px; border-bottom: 1px solid #aca9a7; height: 75px; display: flex; align-items: center; overflow-y: hidden; flex-wrap: nowrap;}.nav_mine .nav_item { border: 1px solid #aca9a7; border-radius: 40px; color: #aca9a7; margin-right: 22px; font-size: 24px; padding: 4px 18px; list-style: none; white-space: nowrap;}對于white-space，item在沒有用white-space:nowrap時，發現一個問題，在未設定寬度的情況下，一個單詞不會換行，而漢字會換行，認為是和display:flex有關系，上網查閱，才知道：white-space是看空格來識別是否換行的，單詞是作為一個字符，所以要針對于漢字和英文，都要設置white-space:nowrap不換行。因為漢字和英文的不同，導致所占的寬度不一致，所以要留1到2個像素。
對應的筆記和實例，我放到了GitHub，https://github.com/sqh17/notes （本地下載） 如果想實踐可以去clone下來。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
