我们平时用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. Scala学习笔记(四):apply方法说明

    当scala中类或者对象有一个主要用途的时候,apply方法就是一个很好地语法糖.请看下面一个简单的例子: class Foo(foo: String) {} object Foo { def app ...

  2. [Full-stack] 异步即时通信 - Async

    故事背景 socket.io, node.js, koa为首的一些通信框架和后端技术点. 之后有必要过一遍<NodeJS 设计模式>. 基础概念 一.短轮询.长轮询(comet).长连接( ...

  3. vue图片放大镜效果

    原作者地址:https://github.com/lemontree2000/vue-magnify 经测试,原插件在使用时有bug,即在预览时进行鼠标滚动,导致遮罩层计算错误.我已修复该bug,特分 ...

  4. php实现多域名共享session会话

    php会话机制参考:我的随笔 缘起 网站,通常会有多个服务器,多个子域名,每个节点运行着不同模块.有时为了整体体验,用户用同一个用户名.密码浏览整站,不用重复登录.这时候就需要多服务器共享sessio ...

  5. ehcache缓存配置与参数说明

    <diskStore path="java.io.tmpdir" /> <defaultCache eternal="false" maxEl ...

  6. day_5.10py 爬妹子图片 mm131

    #目前学的爬虫还有潭州教育的直播课,都是千篇一律的requests urllib 下面这个也是,还没有我后面的下载网易云歌单爽来都用到多线程了不过可以用协程,完全异步 1 #!/usr/bin/env ...

  7. D - Brave Game

    十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻. 今天,大家选择 ...

  8. centos7 LANMP 安装

    没有开头语. 操作系统:CentOs7.6 64位. Nginx:系统自带 nginx1.12.2包. Mysql:系统自带 MariaDB 5.6 ,更换为 Mysql5.6 PHP:系统php5. ...

  9. asp.net Ajax调用Aspx后台方法

    Ajax调用的前提(以aspx文件为例:) 1.首先需要在aspx文件后台中引用using System.Web.Services; 2.需要调用的方法必须是公共的(public).静态的(stati ...

  10. GIAC 2017全球互联网架构大会最新日程

    12月22日至23日,高可用架构和msup联合主办的GIAC 全球互联网架构大会将于上海光大会展中心举行.GIAC 全球互联网架构大会是高可用架构技术社区推广的面向架构师.技术负责人及高端技术从业人员 ...