如何将文章列表用<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>分两列显示的更多相关文章
- li分两列显示
只要控制了li的宽度,利用浮动就能实现<style type="text/css"> .my ul { width: 210px; } .my li { width: ...
- ul和li实现分两列(多列)布局显示
简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...
- CSS------如何让ul中的li分为两列甚至多列
转载: http://blog.sina.com.cn/s/blog_7f13f92a0100rkfg.html 只需要复制ul和li中的style样式即可 如果需要自定义多少列,只需要修改li中的w ...
- ul li一行两个显示
- 两个表,一个表中的两列关联另一个表的id,如何将这个表中的两列显示为另一个表id对应的内容
表A name user owner machine1 1 2 machine2 3 4 表B userid username 1 aaa 2 bbb 3 ccc 4 ddd 以上两个表,表A 设备的 ...
- ReportServices如何在一页中将报表分成两列显示
创建两个数据集 DataSet1 DataSet2 DataSet1 SELECT TOP (SELECT (COUNT(*) + 1) / 2 A ...
- 织梦dede文章列表调用标签的用法和规则
织梦dede列表标签在任何模板的网站中都可能会使用到,而且我们在仿站的时候也经常要使用到列表标签.这里主机吧就给大家讲一下文章列表以及图片列表.软件列表以及分类信息列表标签的用法,和结合div+css ...
- Dede文章列表
文章列表标签的使用: {dede:arclist flag='h' typeid='' row='' col='' titlelen='' infolen='' imgwidth='' imgheig ...
- 基于SpringBoot从零构建博客网站 - 分页显示文章列表功能
显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...
随机推荐
- 根据key删除Map集合中的key-value映射
一:在遍历Map时是不可以删除key-value映射的,如果根据key删除,如下: public static void main(String[] args) { Map<String,Obj ...
- scala get ipv4 address
scala 用 isInstanceOf 会报错(instanceof 这个函数就没有),java 下使用 instanceof 来判断是否是 Inet4Address test("get ...
- 【代码审计】XIAOCMS_后台database.php页面存在任意文件删除漏洞
0x00 环境准备 XIAOCMS官网: http://www.xiaocms.com/ 网站源码版本:XiaoCms (发布时间:2014-12-29) 程序源码下载:http://www.xi ...
- React性能分析利器来了,妈妈再也不用担心我的React应用慢了(转)
Profiler React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用 官方博客 如何使 ...
- 轮滑基础(一)(前摔,葫芦步,推步,A字转弯,弓步转弯)
轮滑新手入门推荐? [柚子陪你学轮滑轮滑教学]第一集 轮滑安全 1,站: 站立:脚可以成v字,或者平行,手放膝盖或者前伸.平行站立 膝盖相距一拳头左右,两腿间距略小于肩宽.膝盖略弯,腰下压,抬头挺胸 ...
- 数据库高分笔记01:事务ACID
作者:arccosxy 转载请注明出处:http://www.cnblogs.com/arccosxy/ 事务就是一组原子性的SQL查询,或者说一个独立的工作单元.如果数据库引擎能够成功地对数据库应 ...
- [实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像
写在前面 最近又开始忙了,工期紧比较赶,另外明天又要去驾校,只能一个功能一个功能的添加了,也许每次完成的功能确实不算什么,等将功能都实现了,然后在找一个好点的ui对前端重构一下. 系列文章 [EF]v ...
- GIT----玩转Git
版本控制 说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景象! 1 2 3 4 5 6 7 8 9 10 11 毕业论文_初稿.doc 毕业论文_修改1.do ...
- ubuntu16.04使用Qt开发ROS
本文介绍一种Qt下进行ROS开发的完美方案,使用的是ros-industrial的Levi-Armstrong在2015年12月开发的一个Qt插件ros_qtc_plugin,这个插件使得Qt“新建项 ...
- [No0000B0]ReSharper操作指南1/16-入门与简介
安装指南 在安装之前,您可能需要检查系统要求. ReSharper是一个VisualStudio扩展.它支持VisualStudio2010,2012,2013,2015和2017.安装完成后,您将在 ...