javascript - 将div内的元素排成一条直线

Question

HTML代码

<div id="identity1">
  <p>
  Hai
  </p>
  <p>
  How are you
  </p>
  <img src="http://lmsotfy.com/so.png" width="200px">
</div>  

CSS 代码

 #identity1
  {
    float:left;
  }

我希望 div 内的所有元素并排放置。我想要这样的输出。

Hai How are you (and the image)

如何做到这一点？我附上了演示文件 here

Answer 1

你正在应用 float:left;到整个分区。如果你想申请到<p>标签然后做:

 #identity1 p
  {
    float:left;
  }

或者您可以为 p 和 img 标签赋予 identify1 类，而不是让它们全部向左浮动。

或者您可以执行此操作以将 float left 应用到所有使用 * 的子元素:

#identity1 *
{
  float:left;
}

示例如下:https://jsfiddle.net/rzwscvke/然后，您可能还想为所有内容添加边距，或者您可以只使用 display:inline 或 display:inline-block，具体取决于您想要的效果。