且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何将文章列表用
  • 分两列显示
  • 更新时间:2022-08-22 16:00:37

      我们平时用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,不会的朋友觉得难,所以还是做个笔记,方便查阅