一列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. BZOJ3648 : 寝室管理

    求环套外向树上节点数不小于K的路径数. 首先树的话直接点分治+树状数组$O(n\log^2n)$搞定 环套树的话,先删掉多余的边(a,b) 然后变成了一棵树,直接点分治 然后在树上找到a到b的路径,将 ...

  2. BZOJ3236: [Ahoi2013]作业

    Description Input Output Sample Input 3 4 1 2 2 1 2 1 3 1 2 1 1 1 3 1 3 2 3 2 3 Sample Output 2 2 1 ...

  3. Mysql_mysql force Index 强制索引

    其他强制操作,优先操作如下: mysql常用的hint 对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的h ...

  4. Mysql 解决left join 数据重复的问题

    select p.*,g.roleName,pg.srcType from t_gold_pay_add p left join gRole g on p.roleID=g.roleID left j ...

  5. Git补丁

    引子: 上班有问题没有解决,在家里搞定了,于是把改动打成一个补丁,明天应用到公司的工作电脑上.(以下内容转自别处) 1.创建补丁,比如把最新的两次提交纪录转化为补丁文件,可以用如下命令: git fo ...

  6. BibTex插入Reference

    1.  在tex文件中加入: \bibliographystyle{plain} %这是格式 \bibliography{reffile} % reffile.bib是reference的文件   2 ...

  7. Mybatis分页和Spring的集成

    写了一个Mybatis分页控件,在这记录一下使用方式. 在Maven中加入依赖: ? 1 2 3 4 5 6 7 8 9 <dependencies>   ...     <depe ...

  8. sqlite相关工具使用

    sqlite3可视化工具 1.sudo apt-get install sqlitebrowser 2.sudo apt-get install sqliteman3.sqlitestudio需要去官 ...

  9. MySQL 数据库设计 笔记与总结（4）维护优化

    [维护和优化的工作] ① 维护数据字典 ② 维护索引 ③ 维护表结构 ④ 在适当的时候对表进行水平拆分或垂直拆分 [维护数据字典] a 使用第三方工具对数据字典进行维护 b 利用数据库本身的备注字段来 ...

  10. Grand Theft Auto V （侠盗列车手5）图形研究

    原文地址:http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study/   原文的简介: GTA(侠盗猎车)系列自从1997 ...