在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. bzoj 2458: [BeiJing2011]最小三角形 题解

    [前言]话说好久没有写题解了.到暑假了反而忙.o(╯□╰)o [原题] 2458: [BeiJing2011]最小三角形 Time Limit: 10 Sec  Memory Limit: 128 M ...

  2. Linux下文件的堵塞与非堵塞对部分系统调用的影响

    1.基本概念 所谓的堵塞,即内核在对文件操作I/O系统调用时.假设条件不满足(可能须要产生I/O),则内核会将该进程挂起.非堵塞则是发现条件不满足就会马上返回. 此外须要注意的是非堵塞并非轮询.不然就 ...

  3. 刨根问底 HTTP 和 WebSocket 协议（下）

    上篇介绍了HTTP1.1协议的基本内容,这篇文章将继续分析WebSocket协议,然后对这两个进行简单的比较. WebSocket WebSocket协议还很年轻,RFC文档相比HTTP的发布时间也很 ...

  4. Java并发专题 带返回结果的批量任务执行

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/27250059 一般情况下,我们使用Runnable作为基本的任务表示形式,但是R ...

  5. TensorFlow CNN 測试CIFAR-10数据集

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50738311 1 CIFAR-10 数 ...

  6. WPF编程学习——样式(好文)

    http://www.cnblogs.com/libaoheng/archive/2011/11/20/2255963.html

  7. ASP.NET动态网站制作（17）-- C#（1）

    前言:用C#也有一年多了,基本上都是边用边学的,现在可以跟着老师系统的学习一下,感觉应该挺好的. 内容: 1.网站部署的相关内容:  (1)想要做一个网站,首先得去买一个域名,老师的域名是在美橙上买的 ...

  8. EasyAR SDK在unity中的简单配置及构建一个简单场景。

    首先打开EasyAR的官方网站http://www.easyar.cn/index.html,注册登陆之后,打开首页的开发页面. 下载sdk和Unity Samples. 创建一个unity3d工程N ...

  9. 输入值/表单提交参数过滤有效防止sql注入的方法

    输入值/表单提交参数过滤,防止sql注入或非法攻击的方法:  代码如下: /** * 过滤sql与php文件操作的关键字 * @param string $string * @return strin ...

  10. springMVC的注释集合

    SpringMVC的工作原理 主要核心实现是DispatcherServlet. 一般来讲客户端对服务器发送请求,是由DispatcherServlet控制的,DispatcherServlet接受到 ...