我想將兩排錨定成兩排？

Question

我有一排7個錨鏈接。我想獲得第四個錨點並將它推到下面的行上，但是無論我做什麼，我都會將第4個錨點推到下面的行上，然後最後3個錨點再次跳到下面的行。

.linkSpan a:nth-child(4) { 
 
    display: block; 
 
}

<span class="linkSpan"> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
</span>

如何獲得錨的復位了第四錨旁邊？

Answer 1

您可以設置鏈接浮動，以及浮法具體的項目。

.linkSpan { 
 
    overflow: auto; 
 
} 
 
.linkSpan a { 
 
    float: left; 
 
    margin-right: 4px; 
 
} 
 
.linkSpan a:nth-child(4) { 
 
    clear: left; 
 
}

<span class="linkSpan"> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
</span>

或者添加僞元素來強制換行。

.linkSpan a:nth-child(4):before { 
 
    content: ""; 
 
    display: table; 
 
}

<span class="linkSpan"> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
    <a href="#">item</a> 
 
</span>

Answer 2

什麼是這樣的：http://codepen.io/pageaffairs/pen/yNPvXb

a:nth-child(4)::before { 
    content: ""; 
    display: block; 
}