CSS解决ul下面最后一个li的margin
1、运用css3的nth-child(3n):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
*{margin:0;padding:0}
.box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;}
.box ul{overflow:hidden;}
.box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-right:10px;margin-bottom:10px;}
.box ul li:nth-child(3n){margin-right:0;}
</style>
</head>
<body>
<div class="box">
<ul>
<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>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div>
</body>
</html>
2、运用margin负值(该方法可以兼容老版浏览器):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
*{margin:0;padding:0}
.box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;}
.box ul{overflow:hidden;margin-left:-10px;}
.box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-left:10px;margin-bottom:10px;}
</style>
</head>
<body>
<div class="box">
<ul>
<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>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div>
</body>
</html>
CSS解决ul下面最后一个li的margin的更多相关文章
- 解决ul里最后一个li的margin问题
在html+css布局里ul>li挺常用的,在群里(WEB前端开发 458732443)总有新手问怎么解决li的最后一个margin值的问题.下面介绍一下,大神请不要拍砖. 先看两个demo,你 ...
- 通过jquery获取ul中第一个li的属性
当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修 ...
- 获取ul下面最后一个li或ul中有多少个li
获取ul下面最后一个li或ul中有多少个li 先获取ul的对象,再通过这个对象获取li的list用for循环取值text之类的 def set_city(self, base_info): quali ...
- 多个ul中第一个li获取定位
如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...
- Html中怎么用CSS让ul中多个li标签不换行横排显示
布局 通常有三种方式 { 1. position 2. float: left --> 其次是这个 3. block: inline-block --> 他们推荐我用这个 } 具体描述 ...
- 解决ul的li横向排列换行的问题
1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...
- 选中多个<ul>中的第一个<li>方法
获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...
- li浮动时ul高度为0,解决ul自适应高度的几种方法
网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
随机推荐
- CodeForcesGym 100676H Capital City
H. Capital City Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on CodeForcesG ...
- windows FTP自动下载脚本
新建ftp.dat文件,内容如下 open xxx.xxx.xxx.xxxusernamepasswordcd lcd x:\filesbinaryhashmget *.*bye 新建run.b ...
- jdk环境变量设置理解
1.系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0) 2.系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOM ...
- linux入门基础——linux用户基础
这篇内容是linux用户基础,相关内容见linux改动username和ubuntu改动username和主机名. 用户.组 当我们使用linux时,须要以一个用户的身份登入,一个进程也须要以一个用户 ...
- 串口通讯 ADC0804 数码管
#include<reg52.h> #include<stdio.h> #include<intrins.h> #define uchar unsigned cha ...
- 图像滤镜艺术---保留细节的磨皮之C#程序实现
上一篇博文"保留细节的磨皮滤镜之PS实现"一文中.我简介了本人自己总结的一种非常easy的磨皮滤镜,这个滤镜在磨光皮肤的同一时候,会保留非常不错的细节,今天,我将介绍使用C#程序实 ...
- iis browse的时候,直接通过本地的局域网ip打开页面
http://www.codepal.co.uk/show/make_IIS_work_with_local_IP_addresses_instead_of_localhost 只需要设置一下webs ...
- tp中使用事务
是什么 事务是为了防止,多个操作,其中有失败,数据有部分被执行成功的时候使用的. 比如,银行,用户转账.张三钱扣了,结果李四钱还增加! 这个时候需要使用事务,确保张三钱扣了,李四的钱也增加,才真正的成 ...
- 13. Roman to Integer[E]罗马数字转整数
题目 Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from ...
- Flask_URL和视图
1.Flask_URL和视图 1.1.第一个flask程序 from flask import Flask #创建一个Flask对象,传递__name__参数进去 app = Flask(__na ...