在html+css布局里ul>li挺常用的，在群里（WEB前端开发 458732443）总有新手问怎么解决li的最后一个margin值的问题。
下面介绍一下，大神请不要拍砖。

先看两个demo，你可以先运行，改变box的宽度看一下。
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;}

　　  　 .box ul li:last-child {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-right:-10px;} // 这里是重点,设置-10,把最后一个的margin-right吃掉

        .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-bottom:10px;margin-right: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>

首先，看看设计的样子，并计算.box的宽度

由于自身带了margin-right被挤下去了

用css3的nth-child(3n)解决办法

现在流行响应式布局，这种css3解决办法，在响应的时候并不靠谱

下面用margin负值解决办法

同理可以用margin-right负值。自己研究
对于新手，如果不需要考虑古代浏览器和响应式就用css3。反之用margin负值。

http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html

解决ul里最后一个li的margin问题的更多相关文章

  1. CSS解决ul下面最后一个li的margin

    1.运用css3的nth-child(3n): <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  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. 解决ul的li横向排列换行的问题

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

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

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

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

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

  8. 利用负margin-bottom去除列表最后一个li元素的border-bottom

    负margin-bottom不会影响元素的实际大小,只会使得后面的元素上移 以第二个里为例,由于第一个li的margin-bottom导致第二个li被上拉1px,第二个li最上面的1px高度覆盖在第一 ...

  9. angular或者js如何确定选中ul中的哪几个li

    刚来新公司接到新的需求做一个知识库页面 红色的是单选    蓝色的是多选     这些都是需要传递到后台的 开始不知道如何解决  下班后在家想到一个很巧妙的办法  不多说上代码 箭头所指就是在li里写 ...

随机推荐

  1. StringUtils工具类详解

    StringUtils判断字符串大概有四种方法: 下面是 StringUtils 判断是否为空的示例: 判断是否为空,但是要注意,空格不算空,这个最好能不用则不用. StringUtils.isEmp ...

  2. Effective C++ Item 34 区分接口继承与实现继承

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 关联条款 Item 36 接口继承和实现继承不同.在 public 继承下, derived ...

  3. linux 上安装apache 出现 configure: error: APR not found. Please read the documentation错误

    今日编译apache时出错: #./configure --prefix……检查编辑环境时出现: checking for APR... noconfigure: error: APR not fou ...

  4. Android Studio 2.3版本 Run项目不能自动启动APP的问题 （转）

    参考: http://blog.csdn.net/lucasey/article/details/61071377 Android Studio 升级到2.3版本后 运行项目后,只是安装上了,而APP ...

  5. #define的使用方法体会

    #define 创建一个宏,该宏是标识符或參数化标识符与标记字符串的关联. 在定义宏之后.编译器可用标记字符串替换源文件里标识符的每一个匹配项. 双击以所有折叠.">语法 #defin ...

  6. Win7下IIS的安装与配置

    win7下IIS的安装和配置 图文教程,需要的朋友可以参考下 一.首先是安装IIS.打开控制面板,找到“程序与功能”,点进去 二.点击左侧“打开或关闭Windows功能” 三.找到“Internet ...

  7. USB设备驱动程序（二）

    首先我们来看USB设备描述符的结构: 在USB总线识别设备阶段就将USB描述符发送给了USB总线驱动程序,设备的数据传输对象是端点,端点0是特殊端点,在USB总线驱动程序识别阶段, 会分配一个地址给U ...

  8. pthon 基础 9.8 增加数据

    #/usr/bin/python #-*- coding:utf-8 -*- #@Time   :2017/11/24 2:59 #@Auther :liuzhenchuan #@File   :增加 ...

  9. linux集群管理

    本文以ubuntu-16.04.3-server-amd64为例,搭建服务器集群.同样是依托于虚拟机. 创建第一个节点 创建新的虚拟机参见:创建新的虚拟机,创建之后,编辑虚拟机,选择Ubuntu镜像, ...

  10. 基于python实现简单web服务器

    做web开发的你,真的熟悉web服务器处理机制吗? 分析请求数据 下面是一段原始的请求数据: b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8000\r\nConnectio ...