一列li并排的时候，需要一些间距的时候，又不需要最右边或者最左边有间距。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<style>

body,div,ul,li,img{margin: ;padding: ;}

li{list-style: none;}

.box{width: 890px;margin: 40px auto;border: 1px solid #ccc;clear: both;}

.box ul{margin-right: -10px;overflow: hidden;}

.box li{width: 290px;height: 100px;float: left;margin-right: 10px;background-color: #ccc;}

img{vertical-align: middle;}

</style>

</head>

<body>

<div class="box">

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

</body>

</html>

ok!

margin负值的更多相关文章

  1. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

  2. 几个常见的布局的多种实现方式及margin负值总结

    第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...

  3. margin负值的几种妙用

    1:定位+margin负值实现元素水平垂直居中 div{ position: absolute; z-index: 1; left: 50%; margin-left: -50px; width: 1 ...

  4. 微吧里的各种margin负值

    直在做各种项目接各种需求,但你的代码能力得到提高了吗?不停的项目经历虽然能够增加你的代码行数,但不一定能提升你的代码质量,所以除了构建阶段的代码细扣,项目之后的代码总结是至关重要的. 微吧中除了模块化 ...

  5. margin负值 – 一个秘密武器

    CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道 margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...

  6. margin负值的使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 理解margin负值

    效果 上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移 下和右方的margin负值会缩小下和右方的空间,使 ...

  8. margin负值的相关应用

    1.页面上实现css sprite背景定位效果   其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的,而差别就 ...

  9. 初探Margin负值(转)

    相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料: 它是一个有效的属性,至少w3c中明确描述如下:”Negativ ...

  10. 双飞翼布局的改造 box-sizing和margin负值的应用

    box-sizing + margin负值 升级双飞翼布局 一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100p ...

随机推荐

  1. BZOJ4327 : JSOI2012 玄武密码

    对所有询问串建立AC自动机. 然后将母串在AC自动机上跑,每走到一个点x,从x点出发沿着fail指针能到的所有前缀都是匹配成功的,暴力向上走,碰到走过的就break,这样每个点最多只会被标记一次. 时 ...

  2. 【BZOJ】1055: [HAOI2008]玩具取名（dp）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1055 我竟然都没往dp这个方向想.....百度了下看到标题是dp马上就会转移了QAQ... 设d[i ...

  3. （转载）c# winform 用子窗体刷新父窗体,子窗体改变父窗体控件的值

    第一种方法: 用委托,Form2和Form3是同一组 Form2 C#代码 using System; using System.Collections.Generic; using System.C ...

  4. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  5. 【C语言】07-基本语句和运算

    一.基本语句 C语言的基本语句跟Java中的差不多,所以,这里只是简单地提一下 循环语句(do while.while.for) 条件语句(if .if-else.switch) goto语句 二.基 ...

  6. JS - 超强大文本动画插件Textillate.js

    http://www.yyyweb.com/demo/textillate/ Textillate.js AsimplepluginforCSS3textanimations.

  7. diff和patch配合使用（转载备用）

    Linux下diff与patch命令的配合使用 在Linux下,diff与patch命令配合使用可以进行简单的代码维护工作. [A] diffdiff命令用于比较文件的差异,可以用于制作patch文件 ...

  8. IOS第六天(1:scrollView 属性和查看大图)

    ***查看大图 #import "HMViewController.h" @interface HMViewController () <UIScrollViewDelega ...

  9. [ZZ] Maxwell 架构

    http://digi.163.com/14/0218/23/9LDCTFON00162DSP.html [IT168 评测]随着一句“娘娘,封神啦(宝鸡口音)”,中国的观众迅速认识到了两个极其出彩的 ...

  10. PHP 错误与异常 笔记与总结（7）将错误日志以邮件方式发送

    当系统发生了很严重的问题,需要立刻发送给管理员.可以通过 error_log() 将错误以邮件形式发送到邮箱. 在 php.ini 中设置: sendmail_from = 472323087@qq. ...