新行中第一个和最后一个行内块元素的选择器 [英] Selector for the first and last inline-block element on a new line

问题描述

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

I'm trying to build a navigation with dynamic elements which may break onto two lines at small screen sizes, and I'd like to be able to style the first and last elements on each line.

以下是一些在小屏幕尺寸下会中断的示例 scss(圆角应位于每行的第一个和最后一个元素上):

Heres some example scss that breaks at small screen sizes (the rounded corners should be on the first and last element on each line):

<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)方法可以实现此效果?

Is it possible to get a selector for the first and last inline-block element that runs onto a new line or are there any other (non-javascript) approaches for this effect?

推荐答案

没有仅使用 CSS 的方法.我在你的小提琴中添加了 JavaScript 解决方案.

There is no CSS-only way. I have added the JavaScript solution in your fiddle.

作为一种解决方法，您可以为列表项分配固定的百分比宽度，并使用 CSS 媒体查询根据屏幕大小增加/减少宽度.通过这种方式，您将确切知道一行中有多少项目，从而允许您设置特定元素的样式.SASS 可以使编写重复的 CSS 更容易.粗略的轮廓(打开整页并调整浏览器大小):

As a workaround, you can assign fixed percentage widths to list items, and use CSS media queries to increase/decrease the widths based on screen size. This way you will know exactly how many items fit on a line which in turn allow you to style specific elements. SASS could make writing repetitive CSS easier. Rough outline (open full page and resize the browser):

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;
  }
}

<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>

这篇关于新行中第一个和最后一个行内块元素的选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！