CSS之使用display:inline-block来布局

使用 `display: inline-block` 可以将元素设置为行内块级元素，可以实现类似于行内元素和块级元素的混合布局效果，并可以对其设置宽高、内边距、外边距等属性。

具体地，我们可以将需要进行布局的元素设置为 `display: inline-block`，然后通过 `vertical-align` 属性来控制元素的垂直对齐方式，再通过 `margin` 和 `padding` 属性来调整元素之间的间距。

例如，下面的代码可以实现两列等宽的布局效果：

<div class="container">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

.container {
  font-size: 0; /* 去除 inline-block 元素之间的空隙 */
}

.col {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  font-size: 16px;
}

这样，两个列就可以并排显示，并且等宽，同时也可以设置内边距和外边距等样式。不过需要注意，使用 `inline-block` 布局时，需要处理好元素之间的空隙问题，一种方法是将父元素的字体大小设置为 0，另一种方法是将元素之间的空隙注释掉。

相关问题

某个元素有如下一个类： li.text-con { position: relative; display: inline-block; vertical-align: middle; }，在不动该类的情况下，怎么去除display: inline-block;属性

你可以使用CSS的覆盖特性来去除display属性。你可以在该元素的CSS代码中添加一个新的CSS规则，将display属性设置为其他值，如block或none，以覆盖原始的inline-block属性。这样就可以实现去除display: inline-block;属性的效果。例如：

li.text-con {
display: block;
}

display: inline-block;

"display: inline-block;" 是 CSS 中的一种布局属性，它可以使元素呈现为内联元素（inline）和块级元素（block）的混合形态。inline-block 元素既可以像内联元素一样在同一行内排列，又可以像块级元素一样设置宽度和高度，以及对其内部进行块级元素的排列。这种布局方式常用于制作水平导航栏、按钮等元素。