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

如何将文章列表用<li>分两列显示的更多相关文章

  1. li分两列显示

    只要控制了li的宽度,利用浮动就能实现<style type="text/css"> .my ul { width: 210px; } .my li { width: ...

  2. ul和li实现分两列(多列)布局显示

    简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...

  3. CSS------如何让ul中的li分为两列甚至多列

    转载: http://blog.sina.com.cn/s/blog_7f13f92a0100rkfg.html 只需要复制ul和li中的style样式即可 如果需要自定义多少列,只需要修改li中的w ...

  4. ul li一行两个显示

  5. 两个表,一个表中的两列关联另一个表的id,如何将这个表中的两列显示为另一个表id对应的内容

    表A name user owner machine1 1 2 machine2 3 4 表B userid username 1 aaa 2 bbb 3 ccc 4 ddd 以上两个表,表A 设备的 ...

  6. ReportServices如何在一页中将报表分成两列显示

    创建两个数据集 DataSet1    DataSet2 DataSet1 SELECT   TOP                    (SELECT   (COUNT(*) + 1) / 2 A ...

  7. 织梦dede文章列表调用标签的用法和规则

    织梦dede列表标签在任何模板的网站中都可能会使用到,而且我们在仿站的时候也经常要使用到列表标签.这里主机吧就给大家讲一下文章列表以及图片列表.软件列表以及分类信息列表标签的用法,和结合div+css ...

  8. Dede文章列表

    文章列表标签的使用: {dede:arclist flag='h' typeid='' row='' col='' titlelen='' infolen='' imgwidth='' imgheig ...

  9. 基于SpringBoot从零构建博客网站 - 分页显示文章列表功能

    显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...

随机推荐

  1. Spark学习笔记——数据读取和保存

    spark所支持的文件格式 1.文本文件 在 Spark 中读写文本文件很容易. 当我们将一个文本文件读取为 RDD 时,输入的每一行 都会成为 RDD 的 一个元素. 也可以将多个完整的文本文件一次 ...

  2. ABBYY FineReader Pro for Mac有哪些特性(下)

    使用ABBYY FineReader Pro for Mac轻松转换纸质文档.PDF文件和数字文本照片为可编辑和可搜索的文件,再也不需要手动重新输入或格式化了,相反,可以编辑.搜索.共享.归档和复制文 ...

  3. [TensorBoard] *Cookbook - Tensorboard

    Ref: https://www.tensorflow.org/get_started/summaries_and_tensorboard 可视化对于Training的重要性,不言而喻. 代码示范 # ...

  4. [PyData] 03 - Data Representation

    Ref: http://blog.csdn.net/u013534498/article/details/51399035 如何在Python中实现这五类强大的概率分布 考虑下在mgrid上画二维概率 ...

  5. [Python] 06 - Modules --> Packages

    故事背景 一.阶级关系 1. Programs are composed of modules.2. Modules contain statements.3. Statements contain ...

  6. 服务器中了蠕虫病毒Wannamine2.0小记

    近期用户反馈某台服务器总感觉性能不是很好存在卡顿,于是今天远程上去分析. 打开任务管理器发现CPU使用率非常低,内存使用也在接受范围内(10/64G).不过我有一个偏好就是不喜欢用系统自带的任务管理器 ...

  7. 企业邮箱绑定微信后,如何设置通过本地验证。(Foxmail)

    老的电脑不行了,换了台暗影精灵3plus顶配,需要把相应的资料移动过来. 然后就发现企业邮箱是绑定了微信的,不能再机器上的Foxmail直接登录,这个问题以前解决过结果自己忘记了,重新解决记录下. 解 ...

  8. Nordic NRF51822 从零开始系列(外部设备片—MPU6050DMP驱动的移植)

    一.硬件准备             (1)开发板和软件参看 Nordic NRF51822 从零开始系列(一)开发环境的搭建             (2)mpu6050模块 二.前置知识     ...

  9. db2 基础语法

    一.db2 基础 基本语法 注释:“--”(两个减号) 字符串连接:“||” 如set msg=’aaaa’||’bbbb’,则msg为’aaaabbbb’ 字符串的引用:‘’(一定用单引号),如果需 ...

  10. 阿里云VPC服务器通过ClassicLink访问经典网络服务器

    VPC中的服务器名称是 vpc-ecs1 , 经典网络中的服务器名称是 classic-ecs2 ,要实现 vpc-ecs1 通过内网访问 classic-ecs2 . VPC 网段是 10.0.0. ...