html - 在灵活的容器中，如何设置/选择第一行的行内 block 元素？

Question

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

例子:

• 一个包含 10 个元素的容器，每个元素宽度为 50 像素，容器宽度为 200 像素 - 选择器将抓取元素 1 到 4(元素 5 之后的元素已被包裹在下一行)

• 一个包含 10 个元素的容器，每个元素宽度为 50 像素，容器宽度为 250 像素 - 选择器将抓取元素 1 到 5(元素 6 之后的元素已被包裹在下一行)

注意:请引用这个 fiddle :http://jsfiddle.net/y7qCJ/ - 但显然第 nth-child 不是这样工作的，因此我的问题就在这里。

Answer 1

第 n 个 child 不是跨浏览器所以你回到手动选择:

.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

更新:

由于您似乎希望目标 LI 的数量取决于 FLUID 布局中浏览器的宽度，因此您将不得不执行伪代码为的 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
  }