本章為大家介紹用css實現橫向捲軸的兩種方式。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
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個像素。
以上是css實作橫向捲軸的兩種方式(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!