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你好吗（和形象）

怎么做？我附上了演示文件here

Answer 1

你正在申请浮动：左;整个div。如果您想申请<p>代码，请执行以下操作：

 #identity1 p
  {
    float:left;
  }

或者你可以给p和img标签提供识别1的类，而不是让它们全部浮动。

或者您可以使用*：

将float left应用于所有子元素

#identity1 *
{
  float:left;
}

以下是示例：https://jsfiddle.net/rzwscvke/ 您可能还想要添加边距，或者您可以使用display：inline或display：inline-block，具体取决于您想要的效果。

Answer 2

您可以将display:inline用于p和img标记

 #identity1 p,
 #identity1 img {
    display:inline;
    vertical-align:middle;
  }

Answer 3

只需添加：

#identity1
{
  float:left;
}
p{
  display:inline;
}

Answer 4

您需要使用

display:inline

用于p和img标签。

我已将代码粘贴到https://jsfiddle.net/v121v6kL/

中

Answer 5

只需将它们全部设为内联块

即可

#identity1 * {
  display: inline-block
}

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

Answer 6

这样的事情？

＆＃13;

#identity1 p {
  float:left;
  margin:0px 2px;
  
}

＆＃13;

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

＆＃13;

将div内的元素放在一条直线上

6 个答案: