Question

我理解这对于纯CSS来说可能是不可能的，但是......我怎样才能从一组元素中选择第n行 - 当这些元素在一个灵活的宽度容器，元素本身是inline-block;

示例：

一个10个元素的容器，每个50px宽，容器宽200px - 选择器会抓取元素1到4（元素5以后已经包裹在下一行）
一个10个元素的容器，每个50px宽，容器宽250px - 选择器将抓取1到5的元素（元素6以上已包裹在下一行）

注意：请参考这个小提琴作为参考：http://jsfiddle.net/y7qCJ/ - 但显然nth-child不能像这样工作，因此我的问题就在这里。

Answer 1

第n个孩子不是跨浏览器，所以您回到手动选择：

.container > li:first-child,
.container > li:first-child+li,
.container > li:first-child+li+li,
.container > li:first-child+li+li+li,
.container > li:first-child+li+li+li+li
{
   border:1px solid red; 
}

显然将首先瞄准前5。如果您的html是服务器生成的，那么您还可以将一些内联服务器端生成的css添加到头部以添加此规则（因为它是可更改的）但是如果您的html永远不会更改，那么您可以将其添加到.css中

请参阅fiddle

更新：

由于您似乎想要在FLUID布局中依赖于浏览器宽度的LI数量，您将不得不执行伪代码所针对的javascript解决方案：

on load/resize

  lielements[] = .container > li
  width = get .container width
  licount = abs(width/50)

  for(int i = 1; i < licount; ++i)
  {
     lielements[i].css = apply css class with width:50px to element
  }

Answer 2

简短回答 - 无法用CSS完成

在柔性容器中，如何设置/选择第一行中的内联块元素？

2 个答案: