如何在Drupal中避免重复列末尾的Margin
一个宽度为400px的列表项里面，要求最后一个列里面没有右边距，效果预览为：
我们一般喜欢给最后一个li写一个单独的样式，注明no-mr：margin-right：0；但是如果是在大量动态随机的显示时，我们会发现需要用到js去控制了，计算出最后一个是4的倍数，再动态添加no-mr这个样式。有没有简单的css，可是实现，不用程序控制就能实现最后一个的margin-right：0呢；答案是肯定的。这里我们来说一下纯css方法和js方法。
第一种：css实现
给外层加一个div，并给它加overflow：hidden；通过这个外层的div来使它隐藏掉最后一个的右边距，记住是隐藏，而不是去掉。
如果你亲手做一下就会发现，这个没有想象中那么简单，假设每一个的宽度为90px，右边距为10px，90*4+10*4=400px，然后你给外层的div定义宽度为400px；overflow：hidden；会发现最后一个li会掉下来，而不是如我们所想的在列的最后面。
下面是实现的两种方法：1、
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * {padding:0;margin:0;list-style:none;} ul{width:408px;margin-right:-8px;} ul li{width:92px;height:100px;border:1px solid #F93;float:left;margin-right:8px;} </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body>
你会发现，其实我没有加div，而是给ul加了一个margin-right：-8px；并且将宽度加了8px，但是实现了效果。
2、代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * {padding:0;margin:0;list-style:none;} ul{width:408px;} ul li{width:92px;height:100px;border:1px solid #F93;float:left;margin-right:8px;} </style> </head> <body> <div style="width:400px;height:120px;background:#ddd;margin:10px auto;overflow:hidden;"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
这就是上面说的加了一个div，宽度设计的比ul的宽度小一个右边距，然后溢出隐藏。
简单的计算方法，
ul宽度=（li宽度+右边距）*4；
div宽度=li宽度*4+右边距*3； 或者 div宽度=ul宽度-右边距*1；
第二种：css3实现
在现代浏览器中还有一种更佳的处理方法，那就是CSS3的“:nth-child 【:nth-child() 伪类允许你定位某个上级元素的一个或多个特定的子元素。】”伪类选择器来实现，实现方法见下：
div ul li：nth-child（4n）{margin-right：0；}，这真的是一个很好的方法，但是注意有兼容问题，目前为止，ie9以下的ie浏览器都不支持css3此功能，慎用。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * {padding:0;margin:0;list-style:none;} ul{width:400px;} ul li{width:92px;height:100px;border:1px solid #F93;float:left;margin-right:8px;} ul li:nth-child(4n){margin-right:0;} </style> </head> <body> <div style="width:400px;height:120px;background:#ddd;margin:10px auto;"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
第三种：JQuery实现，逢四给li加一个去掉右边距的样式
1、$('ul li:nth-child(4n)').addClass('last-col');
并且加一个class：.last-col{margin-right:0;}
或者
2、$('ul li:nth-child(4n)').css('margin-right'，'0');
