li每三个换行
背景:鉴于有时候调取数据用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每三个换行的更多相关文章
- div,li,span自适应宽度换行问题
<ul class="news"> <li><span class="lbl">右对齐,换行显示的解决方法</s ...
- Web前端设计:Html强制不换行<nobr>标签用法代码示例
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...
- DOM基础(三)
对于DOM来说,知识点其实并不多,要理解DOM并不难,难的是会用.可能有的人看见DOM获取元素要这么长一串单词就觉得生无可恋了.不过说实在的,如果你能理解他的意思跟用法.而且稍微再有点英语基础的话,D ...
- ul li 实现层级列表显示
实现效果如下: 实现要求具体如下: 1.标题有序号 上图标记1 2.标题下面的子集标题要有一定的缩进,且子集标题也有一定的序号,上图标记 2 3.如果子集标题内容过长,换行的时,开始的位置不能超过对应 ...
- nobr 不换行标签
示例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- 第三天--html表格
<!Doctype html><html> <head> <meta charset="UTF-8"> ...
- 选中多个<ul>中的第一个<li>方法
获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...
- html: title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
换行代码符合分别为: “&#;”和“&#;” <a href="0.shtml" title="第一排 第二排 第三排">title ...
- Jquery和JS获取ul中li标签(转)
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
随机推荐
- sql回显注入(满满的干货)
三种注入poc where user_id = 1 or 1=1 where user_id = '1' or '1'='1' where user_id =" 1 "or &qu ...
- 【Abode Air程序开发】移动设备、桌面和浏览器应用程序开发的差异
移动设备.桌面和浏览器应用程序开发的差异 在移动设备应用程序中使用 Spark 和 MX 组件的限制 移动设备应用程序在性能方面的注意事项 浏览器 将应用程序部署为 SWF 文件,以用于在浏览器中运 ...
- JS动态添加的标签无法绑定事件解决方案~~~
今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...
- jstack 命令
NAME jstack - Prints Java thread stack traces for a Java process, core file, or remote debug server. ...
- CentoS里Tomcat端口开放
1.发现安装好tomcat后,发现无法访问tomcat首页,后来发现防火墙没有开放8080端口. 需注意的是:CentOS 7防火墙换用Friewalld了,所以要用以下命令将端口号加进防火墙: fi ...
- Socket-实例
import socket,os,time server = socket.socket() server.bind(("localhost",9999)) server.list ...
- 记录 OpenCV 错误
最近在做一个"人脸识别"的项目,我想用OpenCV来分析图片中的人脸. 但是在测试的时候,程序报出“检测到0张脸” 可能的错误原因: 1.教程中OpenCV的版本问题,教程中用的版 ...
- Maven 之 profile 与Spring boot 的 profile
一.概述 不同的环境(测试环境.开发环境)有不同的配置,目前希望在打包的时候,就直接打出针对不同环境的包(内含有某个环境的配置).Maven本身在 pom.xml 中就提供了 profile 标签进行 ...
- XVS 操作
1. xvs安装 rpm -i ***.rpm 2.获取license root@ubuntu:/usr/local/xvs# ./xvs -L .Host ID: 16b3d720584704 ...
- centos安装配置mariadb
CentOS7下使用yum安装MariaDB CentOS 6 或早期的版本中提供的是 MySQL 的服务器/客户端安装包,但 CentOS 7 已使用了 MariaDB 替代了默认的 MySQL.M ...