时间:2019-04-03 10:39:55

标签: html css css3 flexbox

同志。

我需要显示一些元素的列表,这些元素的宽度和数量未知,在项目之间也要有一个分隔符。它可以是几行,也可以不是。

我使用带有 flex-wrap 的flexboxed <ul>,并使用<li>`s的 border-left 分隔符。 如果将行包装成几行,我需要隐藏每行第一项的分隔符。

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
li {
  flex: 0 0 auto;
  border-left: 1px solid red;
}
li:first-child { /* here i need something like ul:flex-row li:first-child */
  border-left: none;
}
html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

使用 css 是否存在此任务的解决方案?
还是我只能使用 js ,例如offset().top的{​​{1}}解析和更改修饰符-类名的更改?

谢谢。

0 个答案:

没有答案