背景：鉴于有时候调取数据用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. 【VS开发】【计算机视觉】OpenCV读写xml文件《C++版本》

    OpenCV FileStorage类读写XML/YML文件 在OpenCV程序中,需要保存中间结果的时候常常会使用.xml / .yml文件,opencv2.0之前都是使用C风格的代码,当时读写XM ...

  2. 10.hive安装

    上传hive安装包并解压 给hive设置一个软链接 给hive配置环境变量 sudo vim /etc/profile #hive export HIVE_HOME=/opt/modules/hive ...

  3. easyswoole报错：failed: Error during WebSocket handshake: Unexpected response code: 200

    WebSocket connection to 'ws://www.xxxx.com/xxx/xx' failed: Error during WebSocket handshake: Unexpec ...

  4. Mysql 三大特性详解

    Mysql 三大特性详解 Mysql Innodb后台线程 工作方式 首先Mysql进程模型是单进程多线程的.所以我们通过ps查找mysqld进程是只有一个. 体系架构 InnoDB存储引擎的架构如下 ...

  5. Spring MVC（一）Spring MVC的原理

    1.Spring MVC的目的 构建像Spring框架那样灵活和松耦合的Web应用程序. 2.Spring MVC中如何处理Request? 每当用户在Web浏览器中点击链接或者提交表单时,Reque ...

  6. Java 反射理解（二）-- 动态加载类

    Java 反射理解(二)-- 动态加载类 概念 在获得类类型中,有一种方法是 Class.forName("类的全称"),有以下要点: 不仅表示了类的类类型,还代表了动态加载类 编 ...

  7. lua的数据类型

    Lua 是动态(弱)类型的语言,它有一下几种数据结构: nil(空) nil 类型表示一种没有任何有效值,它只有一个值 -- nil,例如打印一个没有赋值的变量,便会输出一个 nil 值: print ...

  8. SharePoint 创建页面布局

    一.前言 文章成体系,如果有不明白的地方请查看前面的文章. 二.目录 1.创建页面布局 2.首次使用页面布局 3.修改页面布局 4.使用页面布局 5.最终效果 1.创建页面布局 (1)打开设计管理器, ...

  9. 电脑主板插线方法图解_JFP1主板插线图解

    电脑主板插线方法图解_JFP1主板插线图 仔细看主板上有对应的英文标识的,一对一插就行分别是电源,复位,硬盘灯,电源灯的负极,正极

  10. JS基础_属性名和属性值

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