zoukankan      html  css  js  c++  java
  • 如何将文章列表用<li>分两列显示

      我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们?

      其实相对比较简单,用几行css样式定义一下就够了,可以用div + css来控制

    <style type="text/css">
    .ytkah{ 300px; height:74px; float:left;}
    .ytkah ul{ 280px;}
    .ytkah li{ 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{400px;overflow:hidden;zoom:1;border:1px solid #ccc}
    .list li{float:left;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,不会的朋友觉得难,所以还是做个笔记,方便查阅

  • 相关阅读:
    001 分布式系统
    024 RabbitTemplate组件
    023 RabbitAdmin组件
    022 spring与Rabbitmq整合
    011 mandatory参数
    这样自己组装数据,醉了,
    cool,
    swift,
    page enable,
    构建 HTTPserver,
  • 原文地址:https://www.cnblogs.com/ytkah/p/5148704.html
Copyright © 2011-2022 走看看