CSS實(shí)現(xiàn)左右滑動(dòng)的方法:
/* css代碼開始 */ .container { overflow-x: scroll; /* 橫向滾動(dòng) */ white-space: nowrap; /* 使子元素不換行 */ } .container >div { display: inline-block; /* 子元素橫向排列 */ width: 300px; /* 控制子元素寬度 */ } /* css代碼結(jié)束 */
以上代碼中,我們?cè)O(shè)置了一個(gè)類名為container的容器元素,通過(guò)overflow-x屬性實(shí)現(xiàn)滾動(dòng)。同時(shí),利用white-space屬性使得子元素橫向排列時(shí)不換行。
在container中,我們?cè)O(shè)置了子元素的寬度為300px,并利用display: inline-block使它們橫向排列。
這樣,我們就可以通過(guò)container容器中的滾動(dòng)條來(lái)實(shí)現(xiàn)左右滑動(dòng)了。