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

时间: 2024-10-05 22:30:15

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

水晶报表怎么实现的字段先分组,然后显示的时候在分两列显示呢?

问题描述 按的姓名分组,我用了节专家对报表中的详细信息设置了宽度为9.5CM,但是运行显示的时候,每个框还是不会分两列在显示出来,而是竖着再显示到第2页中去,大家教我该怎么办啊,,,,,急!!!谢谢了 解决方案 解决方案二:up

jsp 显示列表 怎么样分两列显示?

问题描述 怎么样做个循环或者控制,显示两列?目前显示一列的代码如下:<body><divclass="teach_listteach_double_li"><ul><s:iftest="queryModel&&queryModel.items!=null"><s:iteratorvalue="queryModel.items"id="item"><

一行内两列LI,一个LI内两列的效果

这个标题可能有点绕口,实际是两列的LI,LI内又分两列.所以看起来是4列.只好写了这个标题.不过你想你看了效果以后就会知道,相信很多人都用过这样的布局.这个效果用TABLE很好做,用LI来实现难点在于LI的宽度控制,太宽了就会回行,太窄了右列标题挤到了左面.而且li有背景,每隔8行需要有空层,HOHO,造成浏览器BUG的机率太大了,反复调试吧.下面是我自己调试出来的效果,起到抛砖引玉的效果,希望引起关注.以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先

html5-css3多列设置ul中的li两列显示,但出现的问题是点击其中的li,实际显示的却是底下的li的情况。

问题描述 css3多列设置ul中的li两列显示,但出现的问题是点击其中的li,实际显示的却是底下的li的情况. 设置webkit-column-count:2原来设置float的时候没有出现这种情况. 如图 明明点击的是第一个,但显示的确实下边一个. 在实际运行中总是点错. 不知该怎么解决

php循环table实现一行两列显示的方法

  这篇文章主要介绍了php循环table实现一行两列显示的方法,本文直接给出实现代码,重点就是在取余方法的运用,需要的朋友可以参考下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <table width="100%" border="0" cellspacing="1" cellpadding="0" style="background:#CCC&quo

php循环table实现一行两列显示的方法_php实例

<table width="100%" border="0" cellspacing="1" cellpadding="0" style="background:#CCC"> <tr> <td align="center" bgcolor="#FFFFFF">第一列</td> <td align="cen

请教datalist一次循环两列显示

问题描述 <asp:DataListID="DataList1"runat="server"DataSourceID="SqlDataSource1"GridLines="Horizontal"RepeatColumns="2"RepeatDirection="Horizontal"><ItemTemplate><tr><td><as

循环中表格定位的左右两列显示方法

显示|循环 <% Set = rs --------'循环前提省略Response.Write("<table width=""100%"" border=""1"" align=""center"" cellpadding=""4"" cellspacing=""4"">&quo

css文章列表li标签标题左日期右对齐

之前我是这样写 .ulist{ margin:10px;} .ulist li{ width:620px; height:30px ; border-bottom:0px;padding-top:10px;} 效果如下 文章列表li标签标题左日期右对齐-css li右对齐"> 后来网上找到一段代码 .list li a{ color: #0066cc; display: block; padding: 5px 0px 3px 13px; } .list li span{ float: ri