背景:鑒於有時候調取數據用table不方便,所以用的li,但是li又沒有table的樣式,就需要自己寫了
思路:先將所有的li浮動,然后清除第3n+1的浮動(如果是四個則是4n+1)
例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .ulclass li:nth-child(n){ float:left; display:inline; } .ulclass li:nth-child(3n+1){ clear:both } </style> </head> <body> <ul class="ulclass"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
第二種思路:
給li設置寬高,也可以實現,具體的根據大小,要自己調試到對應的位置
本文為原創,轉發請附加原文地址。