[分享]css两个标签横排

在 CSS 中，我们经常需要在同一行上放置多个元素。这可以通过 display 属性来实现。 最常见的方法是使用 display: inlineblock;。 这个属性将元素显示为一个内联元素，但...

在 CSS 中，我们经常需要在同一行上放置多个元素。这可以通过 display 属性来实现。

最常见的方法是使用

display: inline-block;

。 这个属性将元素显示为一个内联元素，但允许您设置该元素的宽度和高度、padding 和 margin 值。下面是一个简单的示例：

 .element1, .element2 {
  display: inline-block;
  width: 50px;
  height: 50px;
}

<div class="element1"></div><div class="element2"></div> 

上面的代码将在同一行上放置两个宽度和高度为 50 像素的元素。 但是，这种方法有一个问题，就是空格符会导致元素之间有一些间距。 下面是修复这个问题的方法：

 .parent {
  font-size: 0; /* 隐藏父元素的空白 */
}

.element1, .element2 {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 16px; /* 重新设置字体大小 */
}

<div class="parent"><div class="element1"></div><div class="element2"></div></div> 

这个例子中，我们给父元素设置了一个 font-size: 0，这样空格符就不会造成影响。 然后，我们为子元素重新设置了 font-size。

除了 inline-block 之外，还有其他的方法可以在同一行上放置多个元素，例如：

display: inline;<pre> 和 <pre>float:left;

。 但是，这些方法可能需要一些其他的 CSS 属性来正确地工作。