[分享]css两个元素处于一行

在布局一个网页时，我们常常需要让两个元素在同一行展示。这时候，可以使用CSS来实现这个效果。/ 将元素设为行内块级元素 / .element1, .element2 { display: inline...

在布局一个网页时，我们常常需要让两个元素在同一行展示。这时候，可以使用CSS来实现这个效果。

/* 将元素设为行内块级元素 */
.element1, .element2 {
  display: inline-block;
}

/* 设置元素的宽度 */
.element1 {
  width: 50%;
}

.element2 {
  width: 50%;
} 

以上代码中，我们将两个元素都设置为行内块级元素，使其可以在同一行展示。然后，通过给每个元素设置50%的宽度，来让它们平分一行。

需要注意的是，设置元素为行内块级元素时，元素之间会有一定的间距。如果不需要这个间距，可以将元素之间的空格去掉。

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

<style>
/* 去掉元素之间的空格 */
.parent {
  font-size: 0;
}

.parent div {
  font-size: 16px;
}
</style> 

以上代码中，我们将元素放到一个父元素中，并通过设置父元素的字体大小为0，来去掉元素之间的空格。然后，再将子元素的字体大小设置为正常大小。

这样，就可以让两个元素在同一行展示，并且没有多余的间距了。