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. 如何在 VMware 上安装 CentOS 6.8

    一.下载 CentOS 6.8  64位 链接:https://pan.baidu.com/s/15qmWGar2m0WzsWxDk4tSSg 密码:wqra 二.安装步骤 1.新建虚拟机 2.自定义 ...

  2. js js键盘各键对应的代码 ---转

    0x1 鼠标左键\r 0x2 鼠标右键\r 0x3 CANCEL 键\r 0x4 鼠标中键\r 0x8 BACKSPACE 键\r 0x9 TAB 键\r 0xC CLEAR 键\r 0xD ENTE ...

  3. XML概述

    本节要点: 标记语言的定义 XML简介 XML与HTML 比较 XML与数据库比较 XML的特点 XML结构 1          标记语言的定义 “XML.SGML.HTML”中的“ML”(Mark ...

  4. MySQL 函数大全及用法示例

    1.字符串函数ascii(str)   返回字符串str的第一个字符的ascii值(str是空串时返回0)  mysql> select ascii('2');  -> 50  mysql ...

  5. 关于excel导入、导出（POI）

    当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际的开发中, ...

  6. chrome隐身模式无法播放flash的解决办法

    困扰很多天的chrome无法播放flash的问题终于解决了 因为之前一直用隐身模式,一直不能播放flash,重装chrome,重装插件,还是不行 结果今天发现正常模式是可以播放的,所以找了一下chro ...

  7. [Beginning SharePoint Designer 2010]列表和库&内部内容类型

    本章概要: 1.SPS如何组织管理数据 2.如何创建列表和文档库 3.如何使用视图来过滤分类,分组列表和库 4.如何创建内容类型来应用一个定义好的结构到数据和文档中

  8. layer iframe加载单个图片或者加载页面

    加载单个图片 layer.open({ type: , title: false, closeBtn: , area: '150px', skin: 'layui-layer-nobg', //没有背 ...

  9. c++中字符输入函数getline、cin.getline区分

    1.cin>>s; s能够是:string  s.char s[]; 这个是ostream中的函数.遇到' '(空格) , '\n'(换行),就会自己主动结束,因此假设用cin读取字符串, ...

  10. kentico中提示Message: An invalid SQL query was used.

    在调用CMSAbstractWebPart类的GetValue方法的时候出错. namespace CMS.PortalEngine.Web.UI{ /// <summary> /// B ...