[分享]css两个元素不在一行显示出来

在CSS布局中，经常会遇到两个元素需要在同一行中显示。但有时候我们也需要将这两个元素分开，让它们不在同一行中。这时候，我们需要使用CSS来完成这个需求。下面是一些常见的CSS属性，可以在将两个元素分开...

在CSS布局中，经常会遇到两个元素需要在同一行中显示。但有时候我们也需要将这两个元素分开，让它们不在同一行中。这时候，我们需要使用CSS来完成这个需求。

下面是一些常见的CSS属性，可以在将两个元素分开的时候使用：

display: block;
display: inline-block;
float: left;
float: right;
clear: both; 

其中，display属性可以将元素设置为块、内联或内联块元素；float属性可以将元素浮动在其容器中；而clear属性可以将元素放到其他元素下面。

举例来说，如果我们想让两个元素分别放在页面的左侧和右侧，可以这样写：

.left {
  float: left;
}
.right {
  float: right;
} 

这里，我们使用float属性将左侧元素向左浮动，将右侧元素向右浮动，从而实现了它们分开的效果。

如果我们想让这两个元素居中显示，可以这样写：

.container {
  text-align: center;
}
.element {
  display: inline-block;
} 

这里，我们使用text-align属性将容器中的文本居中，然后使用display: inline-block将元素设置为内联块元素，从而让它们在同一行中居中显示。

总之，CSS提供了许多方法来实现在同一行中或者分开显示两个元素的需求。开发者应该根据实际情况选择合适的方法来布局页面。