新行中第一个和最后一个内联块元素的选择器 [英] 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.

这里有一些示例示例，它们在小屏幕尺寸时会中断（圆角应在每行的第一个和最后一个元素上）：

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