CSS 内联块
-
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; }
-
使用内联块创建导航链接
一个常见用途display:inline-block是水平而不是垂直显示列表项。以下示例创建水平导航链接:
尝试一下.nav { background-color: yellow; list-style-type: none; text-align: center; margin: 0; padding: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }