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

我正在尝试使用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>

最佳答案

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

您需要在此代码中提供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>

关于javascript - 如何在第3个和第4个列表项之间插入关键点，但是要成为父元素的宽度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44954786/