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的更多相关文章

  1. 解决ul里最后一个li的margin问题

    在html+css布局里ul>li挺常用的,在群里(WEB前端开发 458732443)总有新手问怎么解决li的最后一个margin值的问题.下面介绍一下,大神请不要拍砖. 先看两个demo,你 ...

  2. 通过jquery获取ul中第一个li的属性

    当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修 ...

  3. 获取ul下面最后一个li或ul中有多少个li

    获取ul下面最后一个li或ul中有多少个li 先获取ul的对象,再通过这个对象获取li的list用for循环取值text之类的 def set_city(self, base_info): quali ...

  4. 多个ul中第一个li获取定位

    如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...

  5. Html中怎么用CSS让ul中多个li标签不换行横排显示

    布局 通常有三种方式 { 1. position 2. float: left --> 其次是这个 3. block: inline-block  --> 他们推荐我用这个 } 具体描述 ...

  6. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  7. 选中多个<ul>中的第一个<li>方法

    获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...

  8. li浮动时ul高度为0，解决ul自适应高度的几种方法

    网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...

  9. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

随机推荐

  1. RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第七篇【元素定位介绍】

    http://blog.csdn.net/deadgrape/article/details/50628113 我想大家在玩自动化的时候最关心的一定是如何定位元素,因为元素定位不到后面的什么方法都实现 ...

  2. 逆向学习XXclient怎样仅仅执行一个实例

    个人觉得学习分两种, 一种是当面请教和直接从书本网络中的资料学习. 其二就是看着令你惊叹的作品-顿悟. 什么?顿悟不了?那我们就一起来逆向学习吧!差点忘了,我并不打算提供Demo,这并不重要,难道你打 ...

  3. 数据可视化利器pyechart和matplotlib比较

    python中用作数据可视化的工具有多种,其中matplotlib最为基础.故在工具选择上,图形美观之外,操作方便即上乘. 本文着重说明常见图表用基础版matplotlib和改良版pyecharts作 ...

  4. Codeforces Gym 100015F Fighting for Triangles 状态压缩DP

    F Fighting for Triangles Description Andy and Ralph are playing a two-player game on a triangular bo ...

  5. edit filter rules in sql source control

    https://documentation.red-gate.com/soc6/common-tasks/exclude-objects-using-filters 如果有人上传了filter,nam ...

  6. Qt-信号和槽-多对多

    前言:介绍1对多,多对1以及多对多的案例. 一.1对多 演示内容:在QLineEdit输入时,同步label,text browser以及调试输出板同步显示. 1.1 新建工程 1.2 添加部件 拖入 ...

  7. Python—JSON数据解析

    1.安装pip pip是python的包管理工具,使用它能非常方便地安装和卸载各种python工具包 第一步:直接用浏览器访问地址:https://raw.github.com/pypa/pip/ma ...

  8. SQL Server 汉字转拼音字母

    /* 汉字转拼音首字母 */ create function fun_getPY(@str nvarchar(4000)) returns nvarchar(4000) as begin declar ...

  9. SQL Server 查询所有包含某文本的存储过程、视图、函数

    •  方法一:查询所有包含某文本的存储过程.视图.函数 SELECT * from sysobjects o, syscomments s where o.id = s.id AND text LIK ...

  10. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...