背景：鉴于有时候调取数据用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每三个换行的更多相关文章

  1. div,li,span自适应宽度换行问题

    <ul class="news">    <li><span class="lbl">右对齐,换行显示的解决方法</s ...

  2. Web前端设计:Html强制不换行<nobr>标签用法代码示例

    在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...

  3. DOM基础（三）

    对于DOM来说,知识点其实并不多,要理解DOM并不难,难的是会用.可能有的人看见DOM获取元素要这么长一串单词就觉得生无可恋了.不过说实在的,如果你能理解他的意思跟用法.而且稍微再有点英语基础的话,D ...

  4. ul li 实现层级列表显示

    实现效果如下: 实现要求具体如下: 1.标题有序号 上图标记1 2.标题下面的子集标题要有一定的缩进,且子集标题也有一定的序号,上图标记 2 3.如果子集标题内容过长,换行的时,开始的位置不能超过对应 ...

  5. nobr 不换行标签

    示例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  6. 第三天--html表格

    <!Doctype html><html>    <head>        <meta charset="UTF-8">      ...

  7. 选中多个<ul>中的第一个<li>方法

    获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...

  8. html： title换行方法 如a链接标签内title属性鼠标悬停提示内容换行

    换行代码符合分别为: “&#;”和“&#;” <a href="0.shtml" title="第一排 第二排 第三排">title ...

  9. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

随机推荐

  1. Python处理字符串和列表元组的小技巧

    变量值互换 a = 1 b = 100 # 变量值互换 a, b = b, a print('a:', a) print('b:', b) 输出结果: a: 100 b: 1 多个变量赋值 a, b, ...

  2. krpano下全屏后弹窗失效问题解决方法

    原因 krpano 自身的全屏仅全屏自身,以外的html效果将无法显示 解决方法 把全屏按钮换成浏览器自身的全屏效果 解决步骤 vtourskin.xml <layer name="n ...

  3. Tcpdump移植

    摘要: tcpdump对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析.它支持针对网络层.协议.主机.网络或端口的过滤,并提供and.or.n ...

  4. jumpserver跳板机（堡垒机）安装

     jumpserver跳板机(堡垒机) Jumpserver 是一款由Python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能,基于ssh协议来管理,客户端无需安装agent,助力互联网企业 ...

  5. Idea 控制台Tomcat乱码设置

    找到tomcat安装目录,进入conf目录,找到logging.properties文件 把默认的 java.util.logging.ConsoleHandler.encoding = UTF-8 ...

  6. Spring4学习回顾之路03—XML配置Bean ,依赖注入的方式

    配置Bean的形式可以基于XML文件的方式,也可以基于注解的方式,而Bean的配置方式可以通过全类名(反射),通过工厂方式和FactoryBean. XML形式 <?xml version=&q ...

  7. type()，dir()，getattr()，hasattr(), isinstance()用法

    1.type(变量)  --->输出变量的类型int.float.str or others: 2.dir()   ----> dir() 函数不带参数时,返回当前范围内的变量.方法和定义 ...

  8. Jmeter的基础使用一安装、启动、关联、断言

    一.下载Jmeter,配置环境变量 下载完解压即可, 环境变量配置: -------在环境变量中添加新变量JMETER_HOME:D:\jmeter\apache-jmeter-4.0 ------- ...

  9. 【IntelliJ IDEA】快捷键

    1.System.out.println();的快捷方法 sout然后Alt+Enter或者直接点 2.idea上 重写父类方法的快捷键 Ctrl+O之后,在弹出的上面选择要重写的方法 3.idea ...

  10. IntelliJ IDEA Spring boot devtools 实现热部署

    一.spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动部署新代码. 二.原理 使用了两个ClassLoader,一个ClassLoader用来加载那些不会变 ...