如何将文章列表用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，不会的朋友觉得难，所以还是做个笔记，方便查阅

如何将文章列表用li分两列显示相关推荐

PHP左侧分类表显示,利用CSS实现wordpress侧边栏分类目录分两列显示 | 迷失的世界...
细心的童鞋或许已经发现了我的博客侧边栏的那个分类目录已经由原来的一栏显示变成分两栏显示了,这个主要是根据你自己博客的需要去修改的,如果你希望实现,可以有很多功能强大的插件去实现分类目录分两栏显示,但是 ...
css两列显示,div+css如何控制信息分两列显示?
CSS+DIV教程:.aa25/400.shtmlCSS+DIV 视频教程:.aa25/433.shtml 第一步:规划网站.52css/article.asp?id=175 第二步:创建html模板 ...
HTML中怎样把文字分两栏显示,word设置一页分两栏的三种方法
我们在阅读报纸的时候,经常看到分栏的现象,这就是通过Word当中的"分栏"功能进行设置的,那么下面就由学习啦小编给大家分享下word设置一页分两栏的技巧,希望能帮助到您. word ...
SQL 两行两列显示一行四列或一行两列
前言两行两列显示一行四列 id A B 1 aaa bbb 1 ccc ddd ==>转化为 id A B A B 1 aaa bbb ccc ddd SQL 一对多转为一对一解决方法一 ...
python分两列输出_Pandas实现一列数据分隔为两列
分割成一个包含两个元素列表的列对于一个已知分隔符的简单分割(例如,用破折号分割或用空格分割).str.split() 方法就足够了 . 它在字符串的列(系列)上运行,并返回列表(系列). >& ...
python分两列输出_python分两列输出
分割成一个包含两个元素列表的列对于一个已知分隔符的简单分割(例如,用破折号分割或用空格分割).str.split() 方法就足够了 . 它在字符串的列(系列)上运行,并返回列表(系列). >& ...
python显示两列_#160;python分两列输出
分割成一个包含两个元素列表的列对于一个已知分隔符的简单分割(例如,用破折号分割或用空格分割).str.split() 方法就足够了 . 它在字符串的列(系列)上运行,并返回列表(系列). >& ...
HTML中怎样把文字分两栏显示,Word一栏与多栏文本的混排（同一页既有一栏又有两栏等等）...
在默认情况下,Word的Normal模板被设置为一栏格式,因此,当我们输入文本段落时,输入的格式也是一栏. 然而有时候我们需要在一段文字之后使用两栏或三栏的格式,而在分栏的文字之后又可能再使用一栏的段 ...
ul li一行两个显示
转载于:https://www.cnblogs.com/telwanggs/p/8583064.html

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

如何将文章列表用li分两列显示相关推荐

最新文章

热门文章