我们平时用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. win8 下 TortoiseSVN 不显示图标

    如果你安装 TortoiseSVN 之后,功能使用正常,但是文件夹或文件左上角就是不显示图标,那么你可能 1. 64bit 系统上装了 32bit 的 TortoiseSVN 解决方法是,再安装 64 ...

  2. IntelliJ IDEA下spring boot项目打包

    Spring Boot自带Tomcat插件,可以直接编写启动类,开启Tomcat服务 springboot适合前后端分离,打成jar进行部署更合适 application.properties配置端口 ...

  3. [Object Tracking] How to learn Active contour model - Snake Model

    常见四种跟踪的思路: 区域:人体肢体识别.跟踪 模型:人体面部识别.跟踪 特征:摄像头3D定位 主动轮廓:(蛇模型属于这er,数学基础<图像处理的偏微分方程方法>,也是最流行的一个目前) ...

  4. [Unity3D] 05 - Access to DB or AWS

    可以选择连接本地服务器,或者云服务器. 参考源代码 : https://www.cnblogs.com/wuzhang/p/wuzhang20141202.html (1) 功能:点击一下按键,然后访 ...

  5. [PHP] 05 - Cookie & Session

    故事背景 同 http, html, REST API 一样属于基础性的知识内容. [Node.js] 07 - Html and Http [Node.js] 08 - Web Server and ...

  6. 由n个元素组成的数组,n-2个数出现了偶数次,两个数出现了奇数次,且这两个数不相等,如何用O(1)的空间复杂度,找出这两个数

    思路分析: 方法一:涉及到两个数,就要用到异或定理了:若a^b=x,则a=b^x,b=x^a.对于这道题,假设这两个数分别为a.b,将数组中所有元素异或之后结果为x,因为a!=b,所以x=a^b,且x ...

  7. VS Release模式调试

    c++ -> 常规 -〉调试信息格式 选 程序数据库(/Zi)或(/ZI) c++ -> 优化 -〉优化 选 禁止(/Od) 连接器 -〉调试 -〉生成调试信息 选 是 (/DEBUG)

  8. Clover 3 --- Windows Explorer 资源管理器的一个扩展,为其增加类似谷歌 Chrome 浏览器的多标签页功能。

    http://cn.ejie.me/ http://cn.ejie.me/uploads/setup_clover@3.4.6.exe  软件下载 默认图标实在比较难看,更换图标 更改图标---选择图 ...

  9. 【CF587F】Duff is Mad AC自动机+分块

    [CF587F]Duff is Mad 题意:给出n个串$s_1,s_2..s_n$,有q组询问,每次给出l,r,k,问你编号在[l,r]中的所有串在$s_k$中出现了多少次. $\sum|s_i|, ...

  10. vbox 的 ova 提取vmdk 与 vdi 以及扩容

    原文: http://blog.csdn.net/flm2003/article/details/11980863 1. 从ova提取vmdk: tar xvf oldImage.ova => ...