我们平时用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>分两列显示的更多相关文章

  1. li分两列显示

    只要控制了li的宽度,利用浮动就能实现<style type="text/css"> .my ul { width: 210px; } .my li { width: ...

  2. ul和li实现分两列(多列)布局显示

    简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...

  3. CSS------如何让ul中的li分为两列甚至多列

    转载: http://blog.sina.com.cn/s/blog_7f13f92a0100rkfg.html 只需要复制ul和li中的style样式即可 如果需要自定义多少列,只需要修改li中的w ...

  4. ul li一行两个显示

  5. 两个表,一个表中的两列关联另一个表的id,如何将这个表中的两列显示为另一个表id对应的内容

    表A name user owner machine1 1 2 machine2 3 4 表B userid username 1 aaa 2 bbb 3 ccc 4 ddd 以上两个表,表A 设备的 ...

  6. ReportServices如何在一页中将报表分成两列显示

    创建两个数据集 DataSet1    DataSet2 DataSet1 SELECT   TOP                    (SELECT   (COUNT(*) + 1) / 2 A ...

  7. 织梦dede文章列表调用标签的用法和规则

    织梦dede列表标签在任何模板的网站中都可能会使用到,而且我们在仿站的时候也经常要使用到列表标签.这里主机吧就给大家讲一下文章列表以及图片列表.软件列表以及分类信息列表标签的用法,和结合div+css ...

  8. Dede文章列表

    文章列表标签的使用: {dede:arclist flag='h' typeid='' row='' col='' titlelen='' infolen='' imgwidth='' imgheig ...

  9. 基于SpringBoot从零构建博客网站 - 分页显示文章列表功能

    显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...

随机推荐

  1. IntelliJ IDEA出现Search for无法进入编辑状态

    今天由于多次修改系统时间,然后又进行查询,导致IntelliJ IDEA一直处于Search for,无法修改代码 原因: 可能是在不正确的系统时间启动的IDEA,然后启动完成后又把时间改成正确的 解 ...

  2. windows系统下,express构建的node项目中,如何用debug控制调试日志

    debug是一款控制日志输出的库,可以在开发调试环境下打开日志输出,生产环境下关闭日志输出.这样比console.log方便多了,console.log只有注释掉才能不输出. debug库还可以根据d ...

  3. 从Elasticsearch来看分布式系统架构设计

    分布式系统类型多,涉及面非常广,不同类型的系统有不同的特点,批量计算和实时计算就差别非常大.这篇文章中,重点会讨论下分布式数据系统的设计,比如分布式存储系统,分布式搜索系统,分布式分析系统等. 我们先 ...

  4. E - Radar Installation

    Assume the coasting is an infinite straight line. Land is in one side of coasting, sea in the other. ...

  5. Mysql 全文搜索 Match Against用法

    全文检索在 MySQL 中就是一个 FULLTEXT 类型索引.FULLTEXT 索引用于 MyISAM 表,可以在 CREATE TABLE 时或之后使用 ALTER TABLE 或 CREATE ...

  6. 评估分类器性能的度量,像混淆矩阵、ROC、AUC等

    评估分类器性能的度量,像混淆矩阵.ROC.AUC等 内容概要¶ 模型评估的目的及一般评估流程 分类准确率的用处及其限制 混淆矩阵(confusion matrix)是如何表示一个分类器的性能 混淆矩阵 ...

  7. juqery 判断所有input 不能为空 判断只能为数字 判断身份证号:18位和15位 判断是否银行卡号

    //jq 判断某字符串是否含有特殊符号 function CheckNum() { //定义数组保存特殊字符 var AllNumIsSame = new Array("’", & ...

  8. 坑!vue.js在ios9中失效

    坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...

  9. 具有键“XXX”的 ViewData 项属于类型“System.Int32”,但它必须属于类型“IEnumerable<SelectListItem>

    原因是Edit视图中有@Html.DropDownListFor(m => m.BirthdayAD... 但是没有从Controller中没有设置值

  10. java小tip

    //20181128 ·javaJDK源码在c盘java安装目录里jdk文件夹src.zip压缩包里 ·HashCode()返回的数可能是负数 ·内部类的优点:可以方便调用所在类的方法 ·接口中定义常 ...