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. Statement对象sql注入漏洞的问题

    现在通过mysql以及oracle来测试sql注入  漏洞 mysql中的注释#    oracle中的注释为-- 所以注入漏洞就产生了 //登录测试 public void login()throw ...

  2. ACdream 1415 Important Roads

    Important Roads Special JudgeTime Limit: 20000/10000MS (Java/Others)Memory Limit: 128000/64000KB (Ja ...

  3. ie固定table单元格宽度

    <table border="0" style="width:690px; table-layout:fixed;"> <tr> < ...

  4. jquery-Kendo框架

    从github上下载的包是完整的,可以根据readme.md上的步骤来操作 从官网下的那个包不是完整的,里面没有例子,只有源文件

  5. 【java项目实战】代理模式（Proxy Pattern），静态代理 VS 动态代理

    这篇博文,我们主要以类图和代码的形式来对照学习一下静态代理和动态代理.重点解析各自的优缺点. 定义 代理模式(Proxy Pattern)是对象的结构型模式,代理模式给某一个对象提供了一个代理对象,并 ...

  6. cvReadTrainData

    cvReadTrainData的源代码在opencv的cvboost.cpp文件之中,详细内容例如以下所看到的: CV_BOOST_IMPL void cvReadTrainData( const c ...

  7. Android学习笔记（十二）——使用意图传递数据的几种方式

    使用意图传递数据的几种方式 点此获取完整代码 我们除了要从活动返回数据,也经常要传递数据给活动.对此我们能够使用Intent对象将这些数据传递给目标活动. 1.创建一个名为PassingData的项目 ...

  8. LightOJ--1094-- Farthest Nodes in a Tree(树的直径裸题）

    Farthest Nodes in a Tree Time Limit: 2000MS Memory Limit: 32768KB 64bit IO Format: %lld & %llu S ...

  9. Flask上下文管理机制

    前引 在了解flask上下文管理机制之前,先来一波必知必会的知识点. 面向对象双下方法 首先,先来聊一聊面向对象中的一些特殊的双下划线方法,比如__call__.__getattr__系列.__get ...

  10. BZOJ 4241 分块

    思路: 考虑分块 f[i][j]表示从第i块开头到j的最大值 cnt[i][j]表示从第i块开始到序列末尾j出现了多少次 边角余料处理一下就好啦~ //By SiriusRen #include &l ...