15

我正在创建以三列显示的列表，每个<li>都有border-bottom这样的：

x | x | x
---------    
x | x | x
---------      
z | z | z
---------  

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li><li>z</li>
</ul>

我想要做的是创建一个 nth-child 表达式来删除border-bottom最后一行的三，所以对于上面的例子，这将是：

ul li:nth-child(-n+6) {
    border-bottom:0;
}

问题

然而，稍微复杂一点的是列表中的项目数量会有所不同，因此可能会出现以下任何情况：

方案 1

x | x | x
---------   
x | x | x
---------   
z |
---  

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li>
</ul>

方案 2

x | x | x
---------   
x | x | x
---------   
z | z |
-------

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li>
</ul>

方案 3

x | x | x
---------   
z | z |
-------

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li>
</ul>

结论

我的目标是始终删除border-bottom最后一行的 （或在本例中为字符z），以便它没有应用样式。

一个理想的解决方案是：

ul {
    padding-bottom:-20px;
}

但padding-bottom:-#px;在 CSS 中不支持。

我能想到的唯一其他方法是创建一个第 n 个子表达式来仅捕获包含 3 的行，这不是最后一行？

我想它可能需要某种除以 3 来寻找应用它的数量？

4

5 回答 5

32

到目前为止，我已经创建了一个将样式应用于最后一行的选择器

/* all the cells */
li {
   background: #ccc;
}

/* last row, doesn't matter how many cells */
li:nth-last-child(-n + 3):nth-child(3n + 1), /* first element of the last row */
li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li /* all its following elements */
{
   /* reset the style, eg: */
   background: transparent;
}

你可以在这里看到一个活生生的例子http://jsbin.com/ufosox/1/edit

当然这不支持IE8及以下。

于 2012-10-02T15:33:31.103 回答
10

而不是第 n 个表达式，也许一个简单的 css 解决方案就足够了？

将border-bottom设置为每个LI，并将overflow:hidden设置为UL。然后将每个 LI 向下移动 1px，以便隐藏最后一行。

示例：http: //jsfiddle.net/willemvb/7uGRq/

于 2012-10-15T13:19:02.867 回答
4

由于我看不到nth-*仅使用伪类来实现所需结果的方法，因此我试图发挥创造力：如果您的列表项具有所有相同的高度（例如假设30px），则可以在此完成仅涉及 css 的解决方法方式

http://jsbin.com/ukubug/4/edit

CSS

ul { list-style: none;  
     margin: 3em 0 0 0; padding: 0;
     height: auto; overflow: hidden; 
     position : relative;
}

li { float: left; width: 30px; height: 30px; 
     position: relative; z-index: 1;
     text-align: center; line-height: 30px;  /* just to h/v centering */
}

li:nth-child(3n+1) { clear: left }


ul:before {
   position: absolute;
   z-index : 1;
   content : "";
   display : block;
   background : #f00;
   left    : 0;
   top     : -30px;  /* this is the height of your list-items */
   width   : 100%;
   height  : 100%;
}

诀窍是将背景颜色应用于ul:before伪元素，给它一个绝对位置，然后应用一个等于li高度的负顶部偏移。

overflow : hidden应用到将ul用作清除方法和剪切位于其父边界之外的红色层。同时，您还需要定位li元素，以便它们可以重叠ul:before。

li请注意，如果您的元素少于 4 个，您将看不到任何突出显示效果（因为您的第一行也是最后一行）：如果您需要始终突出显示至少一行（部分填充或不填充），只需应用

min-height : 60px;  /* double height of a li element */

到ul:before.

希望它会有所帮助。

作为最后的考虑，还要注意这个解决方案本身(*)

  • 即使在 上也应该可以正常工作IE8，而依赖于nth-*伪类的解决方案不适用于该伪浏览器
  • 如果您切换到2/4/5/6/... 列布局，它很容易扩展。

(*)好吧，这当然需要不同的方法来获取 a clear: lefton 3n+1li 元素：)

于 2012-10-02T13:58:07.747 回答
0

我不知道您是否可以访问 HTML 代码本身，但如果可以，我的完美解决方案是在 ul 之后添加另一个 html div，背景颜色为白色，高度为 30px，顶部或边距-top of -30px（或任何需要隐藏 ul 的最后一块）

<ul>...</ul>
<div style="background-color: #fff; height: 30px; margin-top: -30px">&nbsp;</div>

另一个注意事项，您尝试了 padding-bottom，但是您尝试了 margin-bottom: -20px 吗？

于 2012-10-14T09:54:31.953 回答
-2

我建议您对所有 li 应用一种样式，然后为最后一个执行特定规则：

ul li:last-child {
    background-color:#FF0;
}

请注意 :last-child 与 IE LTE 8 ( http://www.quirksmode.org/css/contents.html )不兼容

于 2012-10-02T13:37:28.903 回答