這是爲什麼內聯？

我不明白爲什麼div顯示內聯，如果他們被設置爲阻止，不應該第一個div在第二個之上？爲什麼他們彼此相鄰而不是彼此顯示？謝謝你的幫助。這是爲什麼內聯？

div.pagination { 
 
    display: block; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div.pagination li { 
 
    display: block; 
 
} 
 
div.pagination li a { 
 
    color: black; 
 
    float: left; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
}

<h2>Simple Pagination</h2> 
 
<div class="pagination"> 
 
    <li><a href="#">«</a></li> 
 
    <li><a href="#">1</a></li> 
 
    <li><a class="active" href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#">4</a></li> 
 
    <li><a href="#">»</a></li> 
 
</div> 
 
<div class="pagination"> 
 
    <li><a href="#">«</a></li> 
 
    <li><a href="#">1</a></li> 
 
    <li><a class="active" href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#">4</a></li> 
 
    <li><a href="#">»</a></li> 
 
</div>

來源

2016-11-03 Herrsocke

這很可能是由於'浮動：left'，你申請你的錨標記。刪除它，你會注意到你的'div'不再是並排的。 – heyitsjhu

div.pagination { 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div.pagination li { 
 
    display: inline-block; 
 
} 
 
div.pagination li a { 
 
    color: black; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
}

<h2>Simple Pagination</h2> 
 
<div class="pagination"> 
 
    <li><a href="#">«</a></li> 
 
    <li><a href="#">1</a></li> 
 
    <li><a class="active" href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#">4</a></li> 
 
    <li><a href="#">»</a></li> 
 
</div> 
 
<div class="pagination"> 
 
    <li><a href="#">«</a></li> 
 
    <li><a href="#">1</a></li> 
 
    <li><a class="active" href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#">4</a></li> 
 
    <li><a href="#">»</a></li> 
 
</div>

來源

2016-11-03 02:23:03 GvM

請解釋！ –

這是爲什麼內聯？

回答

相關問題