背景：鉴于有时候调取数据用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. 【图像处理与医学图像处理】YUV与RGB格式转换速度几种方法对比

    [视频处理]YUV与RGB格式转换 YUV格式具有亮度信息和色彩信息分离的特点,但大多数图像处理操作都是基于RGB格式. 因此当要对图像进行后期处理显示时,需要把YUV格式转换成RGB格式. RGB与 ...

  2. 【Python】【demo实验17】【练习实例】【将一个正整数分解质因数】

    题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 我的源代码: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 ...

  3. PHP中的闭包

    1.语句结构 在PHP中,由于存在函数内部不能访问全局作用的,所以就需要一种可以引入上一级作用域的语法结构,这种就是 function () use () {} 将需要引入到这个函数作用于内的变量写入 ...

  4. ARC099E. Independence

    考虑一个子问题.给定无向图 $G$,如何判断能否将 $G$ 的点集分成两部分 $S$.$T$ 使得 $S$ 和 $T$ 导出的子图都是完全图? 这个问题把我难住了.解法是考虑 $G$ 的补图 $G'$ ...

  5. 【LOJ】#2983. 「WC2019」数树

    LOJ2983. 「WC2019」数树 task0 有\(i\)条边一样答案就是\(y^{n - i}\) task1 这里有个避免容斥的方法,如果有\(i\)条边重复我们要算的是\(y^{n - i ...

  6. 牛客 158F 青蛙 (贪心)

    显然存在一个最优解满足所有青蛙在连续的一段, 每次由最左侧青蛙跳向下一格. 然后二分或者双指针即可求出答案. #include <iostream> #include <sstrea ...

  7. pat L2-008 复习manacher

    马上要去比赛了 复习一下最长回文串的长度. 算法的实现两个步骤: 1. 一个是对原串的处理,在所有的空隙位置(包括首尾)插入同样的符号,要求这个符号是不会在原串中出现的.这样会使得所有的串都是奇数长度 ...

  8. charles 抓包 （二）

    本文基于charles 抓包 https (1)中的配置完成. 1.移动设备上的网络请求 打开要调试的APP,请求就会先发送到Charles,然后验证是否允许访问. 当点击允许后,可以在Proxy - ...

  9. Java Web ClassLoader工作机制

    一.ClassLoader的作用: 1.类加载机制:父优先的等级加载机制 2.类加载过程 3.将Class字节码重新解析成JVM统一要求的对象格式 二.ClassLoader常用方法 1.define ...

  10. Python（八） —— 异常（概念、捕获、传递、抛出）

    异常的概念 捕获异常 异常的传递 抛出异常 异常的概念 程序在运行时,如果 Python 解释器 遇到 到一个错误,会停止程序的执行,并且提示一些错误信息,这就是 异常 程序停止执行并且提示错误信息  ...