[問題] 請問css的 :after 到底是要怎麼用

看板Web_Design作者時間15年前 (2010/05/13 11:45), 編輯推噓1(108)
留言9則, 2人參與, 最新討論串1/2 (看更多)
我的html是這樣 <div> <a class="prevPage browse left"></a> <div > <ul> <li>1</li> <li>2</li> </ul> </div> <a class="nextPage browse right"></a> </div> 我的css是這樣 a.browse { background:url(image/hori_large.png) no-repeat; width:30px; height:30px; float:left; cursor:pointer; font-size:1px; } 我希望讓在nextPage 以後,就取消原本的float效果,才不會讓後面的貼上來 所以我又加了這一段 .nextPage:after{ clear:both; } 但是這樣子,後面的東西還是水平跟在 nextPage後面 請問要怎麼做才能讓後面的東西跳行 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 122.117.39.194

05/13 12:19, , 1F
我是用<div style="clear:both;"></div> 接後面這樣..
05/13 12:19, 1F

05/13 12:20, , 2F
雖然程式碼寫起來有點重,不過是治本的方法XD
05/13 12:20, 2F

05/13 13:16, , 3F
:after要配合content使用,而且display屬性是inline
05/13 13:16, 3F

05/13 13:17, , 4F
:after{content:".";display:block;height:0;
05/13 13:17, 4F

05/13 13:17, , 5F
clear:both;visibility:hidden;}
05/13 13:17, 5F

05/13 13:18, , 6F
這樣子寫clear:both;才會作用
05/13 13:18, 6F

05/13 13:20, , 7F
這一招名為css clearfix,請自行google可以找到更多資料
05/13 13:20, 7F

05/13 13:30, , 8F
不過要寫在父元件上,所以html還是要用個div包起來
05/13 13:30, 8F

05/13 13:33, , 9F
下面的回文比較清楚,請無視我吧......
05/13 13:33, 9F
文章代碼(AID): #1BwtNVGt (Web_Design)
文章代碼(AID): #1BwtNVGt (Web_Design)