多行列表右边距为零的实现方法

工作当中我们经常遇到这样的需求，多个图片或者其他元素按顺序从左至右排列，左右两侧的元素的外边距都是零。示例如下：

这种布局相信大家都经常遇到，当然用css3选择器的话不难实现，但是我们不得不面对兼容问题。也可以手动来给右侧的元素加上一个class名称，然后让这个class的margin-right:0。那么，问题是，如果这些数据都是从后台动态取出来的，这样的话，数据就不固定了，也无法手动去添加class名称。如果用JS的话就好实现了，但是用JS的话肯定会对页面的性能有一定的影响。那么我们改怎么实现这个效果呢？答案就是使用margin:负值.代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>margin 问题</title>
<style>
*{margin: 0;padding: 0;list-style:none;}
#wrap{width: 320px;height: auto;overflow:hidden;margin: 100px auto;background: blue;border: black 5px solid;
}
#wrap ul{background: green;overflow:hidden;height: auto;margin: 0 -10px -10px 0;
}
#wrap ul li{float: left;width: 100px;height: 100px;line-height:100px;text-align:center;background: red;margin: 0 10px 10px 0;color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<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>
</ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/codinganytime/p/5207576.html

多行列表右边距为零的实现方法相关推荐

去除浮动列表的右边距利用负边距
去除浮动列表的右边距这个效果应该是我们平时最常用的了,以前都是给最后一个套上个 class ,但这样太麻烦,IE6 又不支持高级的选择器写法,利用负边距去做,真是省时又省力:) CSS: div { ...
php输出位置最右,php动态读取数据清除最右边距的方法
需求效果一行3栏: 场景模拟:同事给了我这么一段静态代码如下: Document <?php for($i=0;$i<9;$i++){ echo " "; } ?> ...
html顶部边距代码_html5右边距
css知识 margin和padding是什么意思 margin外边距,padding内边距,外边距表示一个元素的边到相邻元素的距离,内边距表示元素之间的内容和元素边框的距离. font:12px/1 ...
mysql mysql_row 整行数据_PHP使用mysql_fetch_row查询获得数据行列表的方法，phpmysql_fetch_row_PHP教程...
PHP使用mysql_fetch_row查询获得数据行列表的方法,phpmysql_fetch_row 本文实例讲述了PHP使用mysql_fetch_row查询获得数据行列表的方法.分享给大家供大家 ...
php查询mysql表的行数据类型,PHP 使用mysql_fetch_row 查询获得数据行列表的简单示例...
对PHP MYSQL mysql_fetch_row –从查询获得数据行列表感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! mysql_fetch_row用于从mysql数据库中查询数据 ...
html给页面整体添加左右边距_左右边距相对于页面宽度过大
在word里设置版式时,老是提示"左右边距.栏间距或我检查了,整个文档的页边距和页眉页脚都是相同的,怎么能修改版式呢? WORD文档设置A3书籍折页打印显示左右边距相对于页你直接转为PDF版 ...
html 整体边距,html内容左右边距怎么设置
在html中,可以使用padding属性设置内容左右边距,只需要给元素设置"padding:0 数值+单位|百分比数值"即可.padding属性设置元素所有内边距的宽度,或者设置各 ...
vue导出多页PDF（html2Canvas + jsPdf）（PDF左右边距）
我的另一篇文章写了autoTable+jsPdf生成PDF 参考这里 1.将html转成图片canvas( scrollY: refDom.top, // 关键代码,截取长度 heig ...
CSS权重问题导致的盒子右边距无法清除
1. 如图所示,笔者尝试通过以上代码来实现四个小紫色盒子带有边距的完美填充在粉色大盒子里, 但是运行发现,最后的一个紫色小盒子另起一行展示了,消除小盒子右边距也完全没有作用. 2. 尝试加权并且运行 ...

多行列表右边距为零的实现方法

多行列表右边距为零的实现方法相关推荐

最新文章

热门文章