css如何设置行内块元素

CSS中提供了一种很实用的元素类型——行内块元素，可以让我们通过简单的CSS设置来实现方便的布局效果。

    display: inline-block;

设置一个元素为行内块元素相当于同时设置了display: inline和display: block。相较于块级元素，行内块元素可以使得元素在同一行内，占据固定的宽度和高度。

例如，在一个容器内我们想要放置一些水平展示的图片元素，我们可以如下设置：

    .img-container {
        font-size: 0; /* 去除元素间空格 */
    }
    .img-item {
        width: 100px;
        height: 100px;
        display: inline-block;
        *display: inline; /* 兼容IE6-IE7 */
        *zoom: 1;
    }

在上述代码中，我们可以发现一个小技巧：由于行内块元素是基于文本流展示的，因此我们需要将其容器的font-size设置为0来去除元素之间的空格。 同时，在兼容IE6-IE7的情况下，我们需要额外设置zoom属性以激活IE的“layout”属性，使得inline-block定义的样式生效。

总之，CSS中行内块元素的使用非常方便，如图库、导航菜单等界面元素的展示就几乎少不了它们的身影。希望大家可以掌握好行内块元素，并在实际开发中充分发挥它的威力！