背景：鉴于有时候调取数据用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. 用elasticsearch分析中国大学省份分布

    1.去教育部官网下载excel数据:http://www.moe.gov.cn/srcsite/A03/moe_634/201706/W020170616379651135432.xls 2.把xls ...

  2. Centos7 安装Jenkins (rpm 方式)

    首先说明本教程基于jenkins 2.183,但是其他版本基本差不多,主要说一下其中比较坑的几点,做一个总结. 1.rpm 包的下载 从官网上下载rpm的速度简直让人不能忍受,所以千万不要去官网下载. ...

  3. 【转帖】我以为我对Kafka很了解，直到我看了这篇文章

    我以为我对Kafka很了解,直到我看了这篇文章 2019-08-12 18:05 https://www.sohu.com/a/333235171_463994?spm=smpc.author.fd- ...

  4. 查找担保圈-step7-提取未被包含过组的成员，得出结论

    USE [test] GO /****** Object: StoredProcedure [dbo].[p05_get_group_member_cleared] Script Date: 2019 ...

  5. win10下访问vm虚拟机Linux服务

    一.环境 win10操作系统 centos6.5 VMware® Workstation 14 Pro虚拟机 二.互相访问设置步骤 1.查看如下图所示 2.记住上面的IP和网关,进行如下图操作 点击应 ...

  6. Spark性能调优：广播大变量broadcast

    Spark性能调优:广播大变量broadcast 原文链接:https://blog.csdn.net/leen0304/article/details/78720838 概要 有时在开发过程中,会遇 ...

  7. oracle数据库基于(streams流复制)的双机热备配置手册

    ------------------------------------------------------------------------------- 主数据库: 操作系统:windows 2 ...

  8. linux下vi编辑器常用命令

    最近折腾云主机centOS,不得不接触到各种命令,特别是vi编辑器. 时常悔恨当时没好好听金老伯的linux课,导致现在操作命令用的十分生疏,甚至跳转行首行尾都要查一查才知道. 所以〒▽〒有了下面这篇 ...

  9. 切割nginx access日志

    #!/bin/bash nginx_root=/www/server/nginx log_path=/www/wwwlogs yesterday=`date -d "-1 day" ...

  10. pycharm 安装好,只要三部! 超级简单教程!

    pycharm的安装,确实比较麻烦,所以特意做了一期简单版本的安装教程,跟着教程走...只要三部! →下载 链接:https://pan.baidu.com/s/1JxZgAhPVKAIoM1_jpD ...