如何將文章列表用<li>分兩列顯示
阿新 • • 發佈:2022-05-03
我們平時用ul或ol標籤來羅列文章列表時預設是一列,為了美觀起見,想把它們兩列顯示要如何操作呢?怎麼用css定義它們?
其實相對比較簡單,用幾行css樣式定義一下就夠了,可以用div + css來控制
<style type="text/css"> .ytkah{ width:300px; height:74px; float:left;} .ytkah ul{ width:280px;} .ytkah li{ width:100px; float:left; display:block;} </style> <div class="ytkah"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div>
或者直接用css控制
<style type="text/css"> .list{width:400px;overflow:hidden;zoom:1;border:1px solid #ccc} .list li{float:left;width:190px;padding:5px} </style> <ul class="list"> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </ul>
會的感覺so easy,不會的朋友覺得難,所以還是做個筆記,方便查閱