li每三个换行
背景:鉴于有时候调取数据用table不方便,所以用的li,但是li又没有table的样式,就需要自己写了
思路:先将所有的li浮动,然后清除第3n+1的浮动(如果是四个则是4n+1)
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css">
.ulclass li:nth-child(n){
float:left;
display:inline;
}
.ulclass li:nth-child(3n+1){
clear:both
}
</style> </head>
<body>
<ul class="ulclass">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
第二种思路:
给li设置宽高,也可以实现,具体的根据大小,要自己调试到对应的位置
本文为原创,转发请附加原文地址。
li每三个换行的更多相关文章
- div,li,span自适应宽度换行问题
<ul class="news"> <li><span class="lbl">右对齐,换行显示的解决方法</s ...
- Web前端设计:Html强制不换行<nobr>标签用法代码示例
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...
- DOM基础(三)
对于DOM来说,知识点其实并不多,要理解DOM并不难,难的是会用.可能有的人看见DOM获取元素要这么长一串单词就觉得生无可恋了.不过说实在的,如果你能理解他的意思跟用法.而且稍微再有点英语基础的话,D ...
- ul li 实现层级列表显示
实现效果如下: 实现要求具体如下: 1.标题有序号 上图标记1 2.标题下面的子集标题要有一定的缩进,且子集标题也有一定的序号,上图标记 2 3.如果子集标题内容过长,换行的时,开始的位置不能超过对应 ...
- nobr 不换行标签
示例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- 第三天--html表格
<!Doctype html><html> <head> <meta charset="UTF-8"> ...
- 选中多个<ul>中的第一个<li>方法
获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...
- html: title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
换行代码符合分别为: “&#;”和“&#;” <a href="0.shtml" title="第一排 第二排 第三排">title ...
- Jquery和JS获取ul中li标签(转)
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
随机推荐
- 《ThinkPHP 5.0快速入门》 基础和路由
一.基础: 创建项目:conposer create-project topthink/think tp5 --prefer-dist 创建项目模块:php think build --module ...
- maven 编译,测试,打包和安装工程
编译工程,使用命令mvn compile 测试工程,使用命令mvn test 测试和编译工程,使用命令mvn test-compile 打包工程,使用命令mvn package,将工程打包成jar\w ...
- git stash save -a 遇到的坑 , 弹出匿藏错误
情景一: 用命令行的 : git stash save -u "描述" git stash save -a "描述" -u: 会把没有记录到的文件也保存下来(比 ...
- React + Antd开发模式下的Excel导入功能
具体js如下,配合的是antd里面的upload组件,使用的是xlsx插件 npm : npm install xlsx 插件链接: https://github.com/SheetJS/sheet ...
- 阿里RDS
白名单设置: 创建高权限帐号:
- double write 双写
Oracle 8KB Postgresql 8KB MySQL Innodb 16KB buffer page block首先,要DML数据,需要先把page读取到index page中,之后对内存中 ...
- 【LOJ】#3034. 「JOISC 2019 Day2」两道料理
LOJ#3034. 「JOISC 2019 Day2」两道料理 找出最大的\(y_{i}\)使得\(sumA_{i} + sumB_{y_i} \leq S_{i}\) 和最大的\(x_{j}\)使得 ...
- tr、od命令
一.tr:替换或删除字符 语法: tr [OPTION] ... SET1 [SET2] 描述 翻译,压缩和/或删除标准输入中的字符,可写吗? 到标准输出. -c, ...
- drf的三大认证
目录 三大认证任务分析 auth组件的认证权限六表 自定义User表分析 源码分析 认证与权限工作原理 源码分析 认证模块工作原理 权限模块工作原理 admin关联自定义用户表 自定义认证.权限类 用 ...
- Pycharm有必要改的几个默认设置项以及快捷键
最近在用Pycharm学习Python的时候,总有两个地方感觉不是很舒服,比如调用方法的时候区分大小写(thread就不会出现Thread,string就不会出现String)等,这让我稍稍有点不舒服 ...