如何将文章列表用<li>分两列显示
2016-01-21 16:25
253 查看
我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们?
其实相对比较简单,用几行css样式定义一下就够了,可以用div + css来控制
或者直接用css控制
会的感觉so easy,不会的朋友觉得难,所以还是做个笔记,方便查阅
其实相对比较简单,用几行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,不会的朋友觉得难,所以还是做个笔记,方便查阅
相关文章推荐
- 多线程单利模式之双检锁必要性
- Quartz.net持久化与集群部署开发详解
- cocos2dx 3.9 创建自定义mesh进行渲染。
- AWS 之 S3篇<.NET(c#)批量上传文件>
- 安卓测试
- 跳台阶
- 虚函数的使用【C语言】
- 内存分析工具 MAT 的使用
- poi 解析xls表
- hadoop2.7.1的一些新特性
- Ubuntu在终端中安装和卸载软件的方法
- poj2253(floyd)
- iOS中的图像处理(二)——卷积运算
- iOS中的图像处理(三)——混合运算
- Windows下安装MongoDB心得与攻略
- 深入PHP内核之面向对象总结
- Redmine:自动预览附件图片
- linux下安装eclipse开发Spark程序
- linux之多线程fork:进程通信
- 怎样通过做活动快速获取海量用户?这4个步骤你必须要掌握!