时间戳

首页 > 解决方案 > 除元素换行外如何添加样式

html - 除元素换行外如何添加样式

问题描述

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

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

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

标签： htmlcss

解决方案

这个问题似乎没有我想象的那么简单。我最终把破折号放在圆圈之前。而且由于它们是绝对位置，它们在元素边界之外。

我所要做的就是隐藏溢出。这是一个更新的笔

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

推荐阅读