在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. ListView滚动到底部判断

    参考:http://blog.csdn.net/jodan179/article/details/8017693 List13介绍的是ListView.OnScrollListener的 onScro ...

  2. linux进程状态详解（转）

    Linux是一个多用户,多任务的系统,可以同时运行多个用户的多个程序,就必然会产生很多的进程,而每个进程会有不同的状态.  在下文将对进程的 R.S.D.T.Z.X 六种状态做个说明. PROCESS ...

  3. 一致性哈希算法PHP测试片段

    <?php header('Content-type: text/html; charset=utf8');# 抽象接口interface hash{ public function _hash ...

  4. tomcat安装配置规范

    tomcat用户设置 1 2 [root@host-1 ~]# useradd -u 501 tomcat [root@host-1 ~]# passwd tomcat   安装JDK 1 2 3 4 ...

  5. iOS ZipArchive文件解压缩

    ZipArchive可以用于iOS中文件的解压缩 压缩文件的方法: //将工程中picture添加到左面111.zip压缩文件中 如果崩溃请更换压缩路径 -(void)testZipFile{ //压 ...

  6. Java设计模式透析之 —— 策略(Strategy)

    今天你的leader兴致冲冲地找到你,希望你能够帮他一个小忙.他如今急着要去开会.要帮什么忙呢?你非常好奇. 他对你说.当前你们项目的数据库中有一张用户信息表.里面存放了非常用户的数据.如今须要完毕一 ...

  7. __must_check必须处理函数返回值

    include/linux/compiler-gcc4.h  #define __must_check            __attribute__((warn_unused_result)) _ ...

  8. Unable to VNC onto Centos server remotely

    用的好好的vncserver 突然遇到这个错误: [vnc@localhost ~]$ sudo systemctl status vncserver@:1.service -l● vncserver ...

  9. Python爬上不得姐 并将段子写入数据库

    #Python2.7 可以优化一下 前10页 每页点赞最多的段子 百思不得姐 # -*- coding: utf-8 -*-import MySQLdbimport urllib,urllib2imp ...

  10. 地形混合shader

    1.四个贴图混合 Shader "Custom/BlendTex_surface" { Properties { _RTexture("Red Channel Textu ...