CSS 佈局 - display: inline-block
display: inline-block 值
與 display: inline 相比，主要區別在於 display: inline-block 允許設定元素的寬度和高度。
此外，使用 display: inline-block 時，會保留頂部和底部外邊距/內邊距，而使用 display: inline 則不會。
與 display: block 相比，主要區別在於 display: inline-block 不會在元素後新增換行符，因此元素可以與其他元素並排顯示。
以下示例顯示了 display: inline、display: inline-block 和 display: block 的不同行為
示例
span.a {
display: inline; /* span 的預設值 */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
自己動手試一試 »
使用 inline-block 建立導航連結
display: inline-block 的一個常見用途是將列表項水平而非垂直顯示。以下示例建立了水平導航連結
示例
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
自己動手試一試 »
