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

alex-e-leon 发表于 Dev

亚历克斯·莱昂

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

以下是一些示例性的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;
        }
    }        
}

使用relevent jsfiddle：http : //jsfiddle.net/tbw4f23g/1/

是否有可能为第一个和最后一个内联块元素运行到换行符上提供选择器，或者是否有其他（非JavaScript）方法可以达到这种效果？

萨尔曼A

没有仅CSS方式。我已经在您的小提琴中添加了JavaScript解决方案。

解决方法是，您可以为列表项分配固定的百分比宽度，并使用CSS媒体查询根据屏幕大小增加/减少宽度。这样，您将确切地知道一行中可以容纳多少个项目，从而可以对特定元素进行样式设置。SASS可以使编写重复的CSS更加容易。粗略轮廓（打开整页并调整浏览器大小）：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。