在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. vi/vim复制粘贴命

    1. 选定文本块.使用v进入可视模式,移动光标键选定内容. 2.复制的命令是y,即yank(提起) ,常用的命令如下:     y      在使用v模式选定了某一块的时候,复制选定块到缓冲区用:   ...

  2. jeesite中activiti中的流程表梳理

    最近在利用jeesite开发一个小系统,趁着这个机会整理了activiti中的相关表,跟踪流程,然后查看这几个表中数据的变化,可以更好地理解流程的开发.现在整理出来,希望可以帮助更多的人! 表结构 一 ...

  3. iOS swift objc_setAssociatedObject和objc_getAssociatedObject使用

    oc中的AssociationsManager在swift中也是可以实现的 使用方法请看下面一个例子 import UIKit extension UIButton { func fk_addActi ...

  4. [译]GLUT教程 - 位图字体

    Lighthouse3d.com >> GLUT Tutorial >> Fonts >> Bitmap Fonts 位图字体一般是二维字体.虽然我们会把它放到三维 ...

  5. android 蓝牙低耗能（LBE）技术介绍

    蓝牙低能耗(BLE)技术是低成本.短距离.可互操作的鲁棒性无线技术.工作在免许可的2.4GHz ISM射频频段.它从一開始就设计为超低功耗(ULP)无线技术. 它利用很多智能手段最大限度地减少功耗. ...

  6. Docker-Compose 自动创建的网桥与局域网冲突解决方案

    环境: 使用docker-compose.yml 部署应用,docker 默认的网络模式是bridge ,默认网段是172.17.0.1/16  ,不巧的是我们局域网也使用的172.22. xx 网段 ...

  7. node.js实现国标GB28181设备接入的sip服务器解决方案

    方案背景 在介绍GB28181接入服务器的方案前,咱们先大概给大家介绍一下为什么我们选择了用nodejs开发国标GB28181的服务,我大概给很多人介绍过这个方案,大部分都为之虎躯一震,nodejs在 ...

  8. 9.接口BeanPostProcessor

    package org.springframework.beans.factory.config; import org.springframework.beans.BeansException; p ...

  9. cocos2d-x CCControl控件

    感谢点评与关注.欢迎转载与分享.勤奋努力,持之以恒! CCControlSlider 滑动条 void HelloWorld::myInit10() { CCSize size = CCDirecto ...

  10. java 从零开始 第二天

    2015年4月28号晚,珠海.晴. Java 的基本数据类型 有整型(integer),浮点型(float),布尔型(boolean),字符型(char) 1.整型(integer) java最基本的 ...