顾名思义,inline-block
兼具inline和block的特性,整体来说,更类似inline,行内排列,不需要换行,但与inline不同的时,其具有block的一些属性,如可以设置高度和宽度(这是inline所不具备的)。因此在不是太复杂的局部元素布局中,就不必要使用float去搞啊搞,直接inline-block取值就ok啦。
空谈误国,实例兴邦。看例子:
span.a { display: inline; /* span元素其实默认就取值inline */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #46acb6; color: white; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #46acb6; color: white; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: #46acb6; color: white; }
活学活用,观例自学:
.nav { background-color: #d4d854; list-style-type: none; text-align: center; margin: 0; padding: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }