这是为什么内联？

我不明白为什么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

请解释！ –

这是为什么内联？

回答

相关问题