Question

我试图使元素从一个元素到另一个元素画一条线，但是如果它中断或换行到下一行，我不希望那条线存在。有没有办法做到这一点，并调整一行的最后一项以使该行没有？

我知道我可以做类似的事情：

:not(:nth-child(3n))

但是我需要使它动态化，以便随着窗口变小而进行调整。纯CSS可以做到吗？

这里是一个示例，或者，如果您想使用此代码，则可以转到此Pen。

.container {
  padding: 10px;
  position: relative;
}
.child_container {
  max-width: calc(100% - 128px);
}
.child_container .child:not(:last-child):after {
  content: '';
  background: black;
  height: 1px;
  width: 15px;
  top: 17px;
  left: 35px;
  position: absolute;
  z-index: 1px;
}
.child {
  margin: 0 10px 10px 0;
  border: 1px solid blue;
  background: #6F9FD8;
  padding: 10px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 1em;
  position: relative;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid gray; 
  padding: 20px;
}

<div class='container'>
  <div class='child_container'>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
    <div class='child'> x </div>
  </div>
  <div class='right'> Cool Stuff </div>
</div>

Answer 1

问题似乎比我想的要简单得多。我最后把破折号放在圈子前面。而且由于它们是绝对位置，因此它们位于元素边界之外。

我要做的就是隐藏溢出。这是更新后的Pen

.child_container {
  overflow: hidden;
}
.child_container .child:before {
  left: -15px;
  //rest of styles 
}

除了元素包装时，如何添加样式

1 个答案: