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

相关文章

来自专栏DannyHoo的专栏

iOS开发中使用系统中没有的字体-swift

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

723
来自专栏葡萄城控件技术团队

Web程序员们,你准备好迎接HTML5了吗?

HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverl...

1839
来自专栏知晓程序

如何设置微信透明头像和昵称?| 晓技巧

1364
来自专栏DeveWork

Fontello:免费Web-font 图标大集合(font-face 图标集)

当我知道这个网站的存在,我就知道我非常有必要将此分享给大家。Fontello,一个目测有200+个图标(数量还在增加)的 Web-font 图标市场,对于广大设...

1876
来自专栏前端大白专栏

react 在使用数据请求的时候和setState的时候哪个先处理

1655
来自专栏美丽应用

安卓Chrome使用技巧合辑

1293
来自专栏从零开始学自动化测试

selenium+python自动化94-弹出层死活定位不到

前言 部分小伙伴学了selenium的alert后,就不管啥弹出框都去用alert,这是行不通的,看到弹出框,先要确定是不是alert,是才能用,不是的话肯定不...

34510
来自专栏非著名程序员

【周末分享】解决中文排版错位的JustifiedTextview控件

1、FlowingDrawer 效果 ---- ? 2、Justifiedtextview 说明 ---- android中textview在中文排版时会出现无...

1968
来自专栏狂码一生

QT5获取文件信息

994
来自专栏web前端教室

药不能停之--CSS怎么学怎么记效果好?

image.png CSS这个东西,唉,我也是不知道什么时候就学会了的。想当年根本没有前端,做网页就是table套table的时代,CSS基本上只能一种用法...

1846

扫描关注云+社区