麻烦大佬看一下，有个需求，格子有线段连着，主要是这个线段中间的格子个数是不定的，而且还可能有多个段。大佬们能不能提示一下怎么实现这个需求？

请问这种样式怎么实现

云香水识

3.5k1214

发布于
2021-10-19

✓ 已被采纳

https://jsbin.com/yaxehuq/edit?html,css,output

https://codepen.io/pantao/pen...

还有一个问题，如果不增加一个 .end 类，现在还无法选择到 .range 结束的时候的那个元素， .item:not(.range) + .item.range 可以选择到开始。

<div class="scroll">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item"></div>
    <div class="item range"></div>
    <div class="item range"></div>
    <div class="item"></div>
  </div>
</div>

html {
  font-size: 10px;
}

.scroll {
  width: 100%;
  overflow-x: auto;
}

.items {
  display: flex;
  flex-wrap: no-wrap;
}

.item {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: #f0f0f0;
  margin: .2rem .2rem 1rem;
  position: relative;
}

.item:not(.range) + .item.range {
  background-color: #aca;
}

.item:after {
  content: '';
  display: block;
  width: 2rem;
  height: .6rem;
  position: absolute;
  left: calc(.5rem - 1px);
  bottom: calc(-1rem + 1px);
  margin-left: -1px;
  background-color: #fff;
}

.item.range:after {
  content: '';
  display: block;
  width: 2rem;
  height: .6rem;
  border-bottom: 1px solid #aca;
  border-right: 1px solid #aca;
  position: absolute;
  left: calc(.5rem - 1px);
  bottom: calc(-1rem + 1px);
  margin-left: -1px;
  background-color: #fff;
}

.item.range + .item:not(.range):after {
  left: calc(-.9rem - 1px);
  width: 3rem;
  border-left: 1px solid #aca;
}

.item:not(.range) + .item.range:after {
  left: .5rem;
  border-left: 1px solid #aca;
}

.item:not(.range) + .item.range:after {
  left: .5rem;
  border-left: 1px solid #aca;
}