如何在第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>