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

html CSS

泡芙

2020-04-03

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

以下是一些示例示例，它们在较小的屏幕尺寸下会中断（圆角应位于每行的第一个和最后一个元素上）：

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

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?

第4026篇《新行中第一个和最后一个内联块元素的选择器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
伽罗理查德 2020.04.03

是否有可能为在新行上运行的第一个和最后一个inline-block元素选择器，或者是否有其他（非JavaScript）方法可以达到这种效果？

不，没有这样的选择器。CSS不提供有关行中断位置的信息（:first-line伪元素的有限例外）。不，没有其他非JavaScript方法可达到这种效果。

如果您愿意使用JS，则可以在布局可能发生更改时遍历元素，检查每个与其父容器相对的位置，判断它是靠左还是靠右，然后应用边框半径。

另一个可能的JS解决方案是通过累积宽度并确定必须在何处发生断点来执行自己的换行计算。

您可能需要检查诸如Masonry之类的库，以查看它们是否提供了允许您访问内部布局配置的钩子，这可以使此操作更容易。

古一 2020.04.03

没有仅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>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android