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

先看两个demo，你可以先运行，改变box的宽度看一下。
1、运用css3的nth-child(3n)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6.     <style>
  7.     *{margin:0;padding:0}
  8.         .box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;}
  9.         .box ul{overflow:hidden;}
  10.         .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-right:10px;margin-bottom:10px;}
  11.         .box ul li:nth-child(3n){margin-right:0;}
  12. 　　  　 .box ul li:last-child {margin-right:0;}  // 这是设置最后一个
  13.     </style>
  14. </head>
  15. <body>
  16. <div class="box">
  17.     <ul>
  18.         <li>1</li>
  19.         <li>2</li>
  20.         <li>3</li>
  21.         <li>4</li>
  22.         <li>5</li>
  23.         <li>6</li>
  24.         <li>7</li>
  25.         <li>8</li>
  26.         <li>9</li>
  27.         <li>10</li>
  28.         <li>11</li>
  29.         <li>12</li>
  30.         <li>13</li>
  31.     </ul>
  32. </div>
  33. </body>
  34. </html>
 

2、运用margin负值

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6.     <style>
  7.     *{margin:0;padding:0}
  8.         .box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;}
  9.         .box ul{overflow:hidden;margin-right:-10px;} // 这里是重点,设置-10,把最后一个的margin-right吃掉
  10.         .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-bottom:10px;margin-right:10px;}
  11.     </style>
  12. </head>
  13. <body>
  14. <div class="box">
  15.     <ul>
  16.         <li>1</li>
  17.         <li>2</li>
  18.         <li>3</li>
  19.         <li>4</li>
  20.         <li>5</li>
  21.         <li>6</li>
  22.         <li>7</li>
  23.         <li>8</li>
  24.         <li>9</li>
  25.         <li>10</li>
  26.         <li>11</li>
  27.         <li>12</li>
  28.         <li>13</li>
  29.     </ul>
  30. </div>
  31. </body>
  32. </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. Webpack与Gulp、Grunt区别

    Webpack与Gulp.Grunt没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等 ...

  2. C# SqlBulkCopy类批量导入数据

    特别注意  sqlbulkcopy.ColumnMappings.Add(dt.Columns[i].ColumnName, dt.Columns[i].ColumnName); 插入的时候列的顺序可 ...

  3. python实现测试中常用的脚本(待完善)

    一. Python操作MySQL数据库,简单的增删改查 # coding=utf-8 ''' Created on 2015年5月12日 @author: Administrator ''' impo ...

  4. nexus5刷机

    1.下载需要的刷机包,hammerhead-mra58k-factory-52364034.tgz 2.解压包到某个文件下,如D:\Download 3.重启手机进入fastboot模式下,也叫boo ...

  5. 全站301跳转 PHP

    $the_host = $_SERVER['HTTP_HOST'];//取得当前域名 $request_uri = isset($_SERVER['REQUEST_URI']) ? $_SERVER[ ...

  6. 《机器学习实战》——k-近邻算法Python实现问题记录（转载）

    py2.7 : <机器学习实战> k-近邻算法 11.19 更新完毕 原文链接 <机器学习实战>第二章k-近邻算法,自己实现时遇到的问题,以及解决方法.做个记录. 1.写一个k ...

  7. 安装Struts2 类库

    现在,如果一切正常,那么你可以继续设置您的Struts 2框架.以下是简单的步骤,下载并安装在机器上Struts2. 请选择是否要安装Hibernate在Windows或Unix,然后继续进行下一个步 ...

  8. 由浅到深理解ROS（3）-命名空间

    全局命名空间: /rosout前面的反斜杠“/”表明该节点名称属于全局命名空间.之所以叫做全局名称因为它们在任何地方(包括代码.命令行工具.图形界面工具等的任何地方)都可以使用.无论这些名称用作众多命 ...

  9. hdu4847:Wow! Such Doge!（字符串匹配）

    题目:hdu4847:Wow! Such Doge! 题目大意:在给出的段落里面找出"doge"出现的次数.大写和小写都能够. 解题思路:字符串匹配问题,能够在之前将字母都转换成统 ...

  10. kafka的并行度与JStorm性能优化

    kafka的并行度与JStorm性能优化 > Consumers Messaging traditionally has two models: queuing and publish-subs ...