如何将文章列表用<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 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

数组版通讯录-C++

901
来自专栏Objective-C

iOS-UITableView 之 重写 loadView 导致程序崩溃

2806
来自专栏流媒体

gcc用法以及静态/动态链接

-E:只进行预处理,不编译 -S:只编译,不汇编 -c:只编译、汇编,不链接 -g:编译器在编译的时候产生调试信息。 -I:指定include包含文件的...

742
来自专栏DeveWork

WordPress登陆文件wp-login.php添加相关参数,安全有保障

在几个月前的WordPress 界被攻击闹得沸沸扬扬的时候,Jeff在本站DeveWork.com 分享了《修改WordPress登陆文件名wp-login.p...

2096
来自专栏小狼的世界

VIM的常用操作

作为Linux开发的必不可少的工具,能够将Vi的功效发挥到极致,必然能够提高我们的工作效率,下面是一些Vi的使用技巧。

1353
来自专栏数据结构笔记

Django搭建博客(四):渲染前数据的处理

一个简单得方法就是不直接在模板里使用 date属性,而是使用date属性的year 、month 和 day属性来拼凑我们所需的日期格式。

1032
来自专栏ionic3+

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

一般一些js插件,是依托dom的。我们观察initSwiper方法,第一个参数'.wheel .swiper-container'其实是个选择器,所以它也是依托...

732
来自专栏微信终端开发团队的专栏

XCode基本使用及调试技巧

对于初学iOS开发的同学,了解了Objective-C的基本使用后,最关心的应该是如何把OC程序运行起来。由于Xcode的基本使用比较简单,所以本文着重介绍一些...

5807
来自专栏一个爱吃西瓜的程序员

Python爬虫学习--用爬虫抓取糗事百科的笑料

构造一个爬虫需要以下四个步骤:分析目标、下载页面、解析页面、存储内容,其中存储内容暂且不提。(因为我还没学) ◆ 分析目标:我的目标是抓取糗事百科24小时热门笑...

3647
来自专栏木头编程 - moTzxx

小程序 动态修改二维数组 示例

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

871

扫码关注云+社区