Question

我正在尝试使用动态元素构建导航，这些元素可能会在小屏幕尺寸上分成两行，并且我希望能够在每一行上设置第一个和最后一个元素的样式。

下面是一些在小屏幕尺寸上打破的示例scss（圆角应位于每行的第一个和最后一个元素上）：

<ul>
    <li>First page</li>
    <li>Second page</li>
    <li>Third page</li>
    <li>Fourth page</li>
    <li>Another example page</li>
    <li>This could be the last page</li>
    <li>But its not</li>
    <li>This is actually the last page</li> 
</ul>

ul {
    list-style:none;
    font-size:0px;
    li {
        font-size:18px;
        display:inline-block;
        padding:10px 30px;
        border:1px solid black;
        margin:10px -1px 10px 0;
        &:first-child {
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
        }
        &:last-child {
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
        }
    }        
}

使用相关的 jsfiddle ：http://jsfiddle.net/tbw4f23g/1/

是否有可能获得第一个和最后一个内联块元素的选择器，该元素运行到一个新行上，或者是否存在任何其他（非javascript）方法来实现此效果？

Answer 1

没有CSS专用方式。我添加了the JavaScript solution in your fiddle。

作为解决方法，您可以为列表项指定固定百分比宽度，并使用CSS媒体查询根据屏幕大小增加/减少宽度。通过这种方式，您可以确切地知道线上有多少项，这反过来又允许您设置特定元素的样式。 SASS可以使重复的CSS编写更容易。粗略轮廓（打开整页并调整浏览器大小）：

＆＃13;

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  float: left;
  box-sizing: border-box;
  margin-bottom: .5em;
  border: thin solid #EEE;
  padding: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #CEF;
}
li:first-child {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}
li:last-child {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}
@media (min-width: 600px) and (max-width: 799px) {
  /* 4 items per row */
  li {
    width: 25%;
  }
  /* match 4, 8, 12, ...*/
  li:nth-child(4n+4) {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
  }
  /* match 5, 9, 13, ... */
  li:nth-child(4n+5) {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }
}
@media (max-width: 599px) {
  /* 3 items per row */
  li {
    width: 33.3333%;
  }
  /* match 3, 6, 9, ... */
  li:nth-child(3n+3) {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
  }
  /* match 4, 7, 10, ... */
  li:nth-child(3n+4) {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }
}

＆＃13;

<ul>
  <li>Praesent ultricies libero</li>
  <li>Aenean in velit vel</li>
  <li>Ut consequat odio</li>
  <li>Integer convallis sapien</li>
  <li>Fusce placerat augue</li>
  <li>Vestibulum finibus nunc</li>
  <li>Nulla consectetur mi</li>
  <li>Ut sollicitudin metus</li>
  <li>Maecenas quis nisl sit</li>
  <li>Vivamus eleifend justo</li>
  <li>Duis ut libero pharetra</li>
</ul>

＆＃13;

Answer 2

是否有可能获得第一个和最后一个内联块元素的选择器，该元素运行到一个新行上，或者是否存在任何其他（非javascript）方法来实现此效果？

不，没有这样的选择器。 CSS无法访问有关行中断的信息（使用:first-line伪元素的有限例外）。不，没有其他非JavaScript方法可以达到此效果。

如果您愿意使用JS，您可以在布局可能已更改时迭代元素，检查每个相对于其父容器的位置，判断它是否与左侧或右侧，然后应用您的边界半径。

另一种可能的JS解决方案是通过累积宽度并确定必须发生中断的位置来执行自己的换行计算。

您可能希望检查Masonry等库，看看它们是否提供了允许您访问内部布局配置的挂钩，这可以使这更容易。

新行上第一个和最后一个内联块元素的选择器

2 个答案: