如何在第 3 和第 4 个列表项之间插入关键线，但要插入父元素的宽度？答案

【问题标题】：How to insert a keyline between 3rd and 4th list item, but be the width of the parent element?如何在第 3 和第 4 个列表项之间插入关键线，但要插入父元素的宽度？
【发布时间】：2017-07-07 00:53:54
【问题描述】：

我正在尝试使用 nth-child 和之后的类名在两个列表项之间创建一个关键线。这里的技巧是列表项的宽度约为 250px，float:left，我希望 keyline 在第三个列表项之后扩展父 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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

这里你可以在这段代码中看到。

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

【讨论】：