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. rails 安装后调整gem sources 地址

    rails 安装后调整gem sources 地址 使用https会有认证的问题: 移除原有的: gem sources --remove https://rubygems.org/ 查看当前的: g ...

  2. pl/sql sql窗口允许输出和允许变量替换

    pl/sql sql窗口允许输出和允许变量替换 允许输出:类似在命令窗口中输入的 setserveroutput on; 允许变量替换:如果点击了这个,类似于执行 set define off命令 在 ...

  3. UML基本架构建模－－获取类

     Getting Started 開始 Modeling a system involves identifying the things that are important to your p ...

  4. Android调用第三方App

    private List<Map<String, Object>> list = null; private PackageManager mPackageManager; p ...

  5. Error: CompareBaseObjectsInternal can only be called from the main thread

    Posted: 01:39 PM 06-17-2013 hi, we're working on a project where we need to do some calculations on ...

  6. uiautomator中InteractionController学习笔记(8)

    4.1版本号 InteractionController将用户的键盘事件注入到android系统中,与系统进行交互(电视为什么不能设计成可组装,屏幕多大自己决定,想 多大就多大) click(int, ...

  7. Java 后台性能优化简要

    业务系统性能优化的前提时观察和诊断.观察工具例如以下:前端优化工具:YSlow页面响应时间:Firebug方法对应时间:btraceGC日志分析:JVM 启动參数数据库优化:慢查询系统资源调用:监控 ...

  8. Android 编程下获得应用程序的签名

    说明:应用程序的签名被封装在 packageInfo 中,所以我们要获得应用程序的签名就需要获得 PackageManager 来获得包含有签名信息的 packageInfo,再通过 packageI ...

  9. UESTC--1263--The Desire of Asuna（贪心）

    The Desire of Asuna Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Su ...

  10. ROS-导航功能-RVIZ

    前言:slam使用激光雷达完成了地图构建,现在介绍一下自主导航.move_base用于实现最优路径规划,amcl用于实现机器人定位. 前提:已下载并编译了相关功能包集,如还未下载,可通过git下载:h ...