如何在第3个和第4个列表项之间插入关键点，但是要成为父元素的宽度？

Question

我正在尝试使用nth-child和after在具有类名的两个列表项之间创建关键行。 这里的技巧是，列表项的宽度约为250px，float：left，我希望键线在第三个列表项之后将父div的宽度扩展为1000px。 到目前为止，我已经能够在第三个列表项之后创建关键行，但是其宽度仍然为250px宽：

  #FS-TilesContainer { margin: auto; width: 1000px; } .FS-Tile { float: left; overflow: hidden; width: 225px; margin: 0 0 47px 35px; } .FS-Tile:nth-child(-n+3) { width: 300px; } .FS-Tile:nth-child(3)::after { content:''; border-top: 5px solid #EAEAEA; display: block; width: 1000px; left: 0; } 

  <div id="FS-TilesContainer"> <ul id="FS-TilesGrid"> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> </ul> </div> 

Answer 1

在这里您可以看到此代码。

您需要给出position:absolute此代码中的position:absolute

.FS-Tile:nth-child(3)::after {
    content: '';
    border-top: 5px solid #EAEAEA;
    display: block;
    width: 1000px;
    left: 0;
    position: absolute; //new added
}

选中此希望对您有帮助。

 #FS-TilesContainer { margin: auto; width: 1024px; } .FS-Tile { float: left; overflow: hidden; width: 221px; margin: 0 0 47px 35px; } .FS-Tile:nth-child(-n+3) { width: 300px; } .FS-Tile:nth-child(3)::after { content:''; border-top: 5px solid #EAEAEA; display: block; width: 1000px; left: 0; position:absolute; } 

 <div id="FS-TilesContainer"> <ul id="FS-TilesGrid"> <li class="FS-Tile">test</li> <li class="FS-Tile">test1</li> <li class="FS-Tile">test2</li> <li class="FS-Tile">test3</li> <li class="FS-Tile">test4</li> <li class="FS-Tile">test5</li> <li class="FS-Tile">test6</li> <li class="FS-Tile">test7</li> <li class="FS-Tile">test8</li> </ul> </div>