背景：鉴于有时候调取数据用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开发】C++ opencv Mat基础

    OpenCV2:Mat 1.Mat基础 在计算机内存中,数字图像是已矩阵的形式保存的.OpenCV2中,数据结构Mat是保存图像像素信息的矩阵,它主要包含两部分:矩阵头和一个指向像素数据的矩阵指针. ...

  2. 【DSP开发】gel文件编写

    以下转载自:http://blog.csdn.net/henhen2002/article/details/4573447 GEL--通用扩展语言,无类型语言,只有int类型,当CCS运行时首先执行这 ...

  3. js-转换方式示例

    var person1 = { toLocaleString : function () { return "Baraka"; }, toString : function() { ...

  4. linux文件权限更改命令chmod及数字权限实践总结

     改变权限属性命令chmod chmod 是用来改变文件或目录权限的命令,但只有文件的属主和超级用户root才有这种权限.通过chmod来改变文件或目录的权限有两种方法:一种是通过权限字母和操作符表达 ...

  5. redis5.0 数据结构与命令

    1.redis 支持如下5种数据结构 数据结构 说明 简介 String 字符串 key-val Hash 哈希 filed-val 映射表 List 列表 双向链表 Set 集合 element(元 ...

  6. Javascript - BOM 对象

    浏览器相关的对象.获取浏览器相关的信息,可以设置和修改浏览器属性. 0. web-app 版 TodoList 小程序 用以下内容可以自己手写一个 TodoList 小程序,再添加几行代码就可以用手机 ...

  7. layui 实现图片上传和预览

    [学习笔记] 图片不自动上传并在表单提交时再上传,看代码. 附上表单页面 前台实现 <#--图片名--><input id="fileName" type=&qu ...

  8. JZOJ.1002【USACO题库】1.1.3 Friday the Thirteenth黑色星期五

    每日一博第一天! 保持你的决心 题目描述 13号又是星期五是一个不寻常的日子吗? 13号在星期五比在其他日少吗?为了回答这个问题,写一个程序来计算在n年里13 日落在星期一,星期二......星期日的 ...

  9. Jmeter之Plugin插件，服务器监控

    Jmeter Plugins插件 我在测试工作中:主要使用了监听器中的图表报告和监控服务器CPU,内存(这篇博文就是对插件的安装,以及jmeter怎么监控服务器CPU~) 1.下载安装Plugins插 ...

  10. Git 学习笔记之（三）将本地工程导入到GitHub 仓库中

    一:操作步骤第一步:建立git仓库 cd到你的本地项目根目录下,执行git命令,此命令会在当前目录下创建一个.git文件夹. git init 第二步:将项目的所有文件添加到仓库中 git add . ...