如何将文章列表用<li>分两列显示

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户画像

3.3 分页管理与分段管理的比较

分页 管理方式和分段管理方式在很多地方相似,比如内存中都是不连续的,都有地址变换机构来进行地址映射等。但两者也存在着很多区别。

632
来自专栏知识分享

(二)Lua脚本语言入门

上一篇文章忘了插入代码了,方便粘贴复制...... 函数 对于c语言就是  void aa()//c语言是用void { print("这是一个函数") }...

3377
来自专栏null的专栏

C/C++——柔性数组

1、问题来源 在博文数据结构和算法——kd树中,在构建kd树的过程中,有如下的一段代码: #define MAX_LEN 1024 typedef struc...

2764
来自专栏嵌入式程序猿

号外号外:无规矩不成方圆(4)

本文MISRA规则由嵌入式程序猿整理自网络,版权归原作者所有 不能使用三字母词 三字母词由2 个问号序列后跟1 个确定字符组成(如, ??- 代表“ ~”(非)...

2555
来自专栏程序员互动联盟

【答疑释惑第四十讲】前端工程师和程序猿有什么区别?

疑惑一 int *p,sizeof(p) 输出多少? ? 对于这个问题,我们知道,指针的大小和指针的类型相关,那么int 型指针的长度其实就是整形的长度。那...

3288
来自专栏带你撸出一手好代码

正则表达式「^」符号的正确理解方式

「^」这个符号在正则表达式的中的应用相信是所有程序员都掌握的, 因为它是正则表达式中最基础最常用的知识点。 它在正则表达式中表示两种不同的意义 01 表示匹配一...

2613
来自专栏java一日一条

Java 多线程处理任务的封装

最近公司项目很多地方使用多线程处理一些任务,逻辑代码和java多线程处理代码混合在一起,造成代码的可读性超级差,现在把Java多线程相关的处理抽出来,方面代码中...

564
来自专栏编程

Python数据类型之字符串第四季

各位小伙伴们 “黑一”快乐 本节课非常非常重要 请各位小伙伴 一定认真理解和学习 技术要点: 内建函数 函数的理解 如何使用一个函数 capitalize()函...

1750
来自专栏web前端教室

web前端零基础课-0907*凯政-学习笔记

2.1 - Js数据类型,5中基本数据类型( String, Number, Boolean, Undefined, Null ),一种复杂数据...

632
来自专栏前端侠2.0

oracle 两表关联时,年月条件的写法引起的巨大性能的差异

需求是要比较最近两个月的值,进行数据检验!所以我用自关联,来将两个月的数据放到一行上,然后进行比较!

782

扫码关注云+社区