css两个元素不在一行显示

在网页设计中，我们经常会遇到一个问题：两个元素不在同一行上显示。这时候，我们可以使用CSS来解决这个问题。

/* HTML 代码 */
<div id="container">
  <div id="element1">我是第一个元素</div>
  <div id="element2">我是第二个元素</div>
</div>

/* CSS 代码 */
#container {
  display: flex; /* 使用flex布局 */
}

#element1, #element2 {
  flex: 1; /* 将两个元素等分容器宽度 */
} 

上面的代码中，我们使用了CSS的flex布局。container元素使用了display:flex属性，表示使用flex布局；而element1和element2元素使用了flex:1属性，表示将两个元素等分container容器的宽度。这样，就能够让两个元素在同一行上显示了。

除了使用flex布局，我们还可以使用float属性来解决这个问题。具体代码如下：

/* HTML 代码 */
<div id="container">
  <div id="element1">我是第一个元素</div>
  <div id="element2">我是第二个元素</div>
</div>

/* CSS 代码 */
#container {
  width: 100%; /* 给容器设置宽度 */
  overflow: hidden; /* 清除浮动 */
}

#element1 {
  float: left; /* 将第一个元素向左浮动 */
  width: 50%; /* 将容器宽度的一半给第一个元素 */
}

#element2 {
  float: left; /* 将第二个元素向左浮动 */
  width: 50%; /* 将容器宽度的一半给第二个元素 */
} 

上面的代码中，我们使用了CSS的float属性来实现。首先，我们给container容器设置了一个宽度，然后使用overflow:hidden属性来清除浮动。接着，我们使用了float:left属性将两个元素向左浮动，并将容器宽度的一半分给了这两个元素。这样，两个元素就能够在同一行上显示了。