如何将文章列表用<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 ...
随机推荐
- 【Docker】退出容器和进入容器
运行容器:docker run -it 镜像名 /bin/bash 退出容器: exit 或者 Ctrl+P+Q 查看容器:docker ps -a 查看运行的容器:docker ps 重启容器:do ...
- [Android] 基于 Linux 命令行构建 Android 应用(二):命令行管理项目
创建 Android 项目 在命令行创建 Android 项目需要用到 android 工具(该工具由 Android SDK 提供,位于 <sdk>/tools/ 目录下.).它能自动生 ...
- Android ListView只加载当前屏幕内的图片(解决list滑动时加载卡顿)
最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也 ...
- Kafka 1.1新功能:数据的路径间迁移
经常有小伙伴有这样的疑问:为什么线上Kafka机器各个磁盘间的占用不均匀,经常出现“一边倒”的情形? 这是因为Kafka只保证分区数量在各个磁盘上均匀分布,但它无法知晓每个分区实际占用空间,故很有可能 ...
- 一个表中的id有多个记录,把所有这个id的记录查出来,并显示共有多少条记录数
一个表中的id有多个记录,把所有这个id的记录查出来,并显示共有多少条记录数 select id ,Count(*) from table_name group by id having count( ...
- thinkphp中setInc、setDec方法
可用于统计字段(通常是数字类型的字段)的更新,例如积分,等级,登陆次数等 必须配合连贯操作where一起使用 score 是数据库指定的某个字段 $User = M("User" ...
- c语言中的左移和右移
先说左移,左移就是把一个数的所有位都向左移动若干位,在C中用<<运算符.例如: int i = 1;i = i << 2; //把i里的值左移2位 也就是说,1的2进制是00 ...
- C#网页采集数据的几种方式(WebClient、WebBrowser和HttpWebRequest/HttpWebResponse)
一.通过WebClient获取网页内容 这是一种很简单的获取方式,当然,其它的获取方法也很简单.在这里首先要说明的是,如果为了实际项目的效率考虑,需要考虑在函数中分配一个内存区域.大概写法如下 //M ...
- Maven、SpringBoot框架结构优化
一.创建maven项目,名为test-parent,pom文件如下: ... <artifactId>test-parent</artifactId> <version& ...
- mapReducer 去重副的单词
需求是: 统计输出某目录文件的所有单词,去除重复的单词. mapper阶段正常做map工作,映射. 切割单词. <key,value> --> <word,nullWrita ...