前幾天文匯小編在進(jìn)行網(wǎng)頁(yè)頁(yè)面開(kāi)發(fā)時(shí),遇到了一個(gè)頁(yè)面需求,就是頁(yè)面的上下翻頁(yè)與返回列表的按鈕功能,下面就是實(shí)現(xiàn)的效果圖。
想要實(shí)現(xiàn)這樣的效果,可以左側(cè)的左浮動(dòng),右側(cè)的右浮動(dòng),中間的使用margin:0 auto;這是小編當(dāng)時(shí)的想法,但這個(gè)想法被實(shí)現(xiàn)起來(lái)的時(shí)候,還是遇到了問(wèn)題,就是中間的元素?zé)o法居中。由于元素浮動(dòng)了,導(dǎo)致了中間元素的margin:0 auto無(wú)效。當(dāng)時(shí)的效果是這樣的;
最后小編將元素的父級(jí)盒子設(shè)置相對(duì)定位,將中間的元素設(shè)置絕對(duì)定位,left:50%;margin-left的值等于負(fù)的自身寬度的一半,使元素居中顯示,最后的實(shí)現(xiàn)效果。
關(guān)鍵詞: