我们平时用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. 【Docker】退出容器和进入容器

    运行容器:docker run -it 镜像名 /bin/bash 退出容器: exit 或者 Ctrl+P+Q 查看容器:docker ps -a 查看运行的容器:docker ps 重启容器:do ...

  2. [Android] 基于 Linux 命令行构建 Android 应用(二):命令行管理项目

    创建 Android 项目 在命令行创建 Android 项目需要用到 android 工具(该工具由 Android SDK 提供,位于 <sdk>/tools/ 目录下.).它能自动生 ...

  3. Android ListView只加载当前屏幕内的图片(解决list滑动时加载卡顿)

    最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也 ...

  4. Kafka 1.1新功能:数据的路径间迁移

    经常有小伙伴有这样的疑问:为什么线上Kafka机器各个磁盘间的占用不均匀,经常出现“一边倒”的情形? 这是因为Kafka只保证分区数量在各个磁盘上均匀分布,但它无法知晓每个分区实际占用空间,故很有可能 ...

  5. 一个表中的id有多个记录,把所有这个id的记录查出来,并显示共有多少条记录数

    一个表中的id有多个记录,把所有这个id的记录查出来,并显示共有多少条记录数 select id ,Count(*) from table_name group by id having count( ...

  6. thinkphp中setInc、setDec方法

    可用于统计字段(通常是数字类型的字段)的更新,例如积分,等级,登陆次数等 必须配合连贯操作where一起使用   score 是数据库指定的某个字段 $User = M("User" ...

  7. c语言中的左移和右移

    先说左移,左移就是把一个数的所有位都向左移动若干位,在C中用<<运算符.例如: int i = 1;i = i << 2;  //把i里的值左移2位 也就是说,1的2进制是00 ...

  8. C#网页采集数据的几种方式(WebClient、WebBrowser和HttpWebRequest/HttpWebResponse)

    一.通过WebClient获取网页内容 这是一种很简单的获取方式,当然,其它的获取方法也很简单.在这里首先要说明的是,如果为了实际项目的效率考虑,需要考虑在函数中分配一个内存区域.大概写法如下 //M ...

  9. Maven、SpringBoot框架结构优化

    一.创建maven项目,名为test-parent,pom文件如下: ... <artifactId>test-parent</artifactId> <version& ...

  10. mapReducer 去重副的单词

    需求是: 统计输出某目录文件的所有单词,去除重复的单词. mapper阶段正常做map工作,映射. 切割单词. <key,value> -->  <word,nullWrita ...