li每三個換行


 

背景:鑒於有時候調取數據用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設置寬高,也可以實現,具體的根據大小,要自己調試到對應的位置

 

本文為原創,轉發請附加原文地址。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM