Question

我希望我的图片在同一行的<p>标记之后。我尝试将它们包含在<div>块中并设置display:inline-block但无效。

<div style="float:left; display:inline-block; ">
  <span style="float:left;width: 50%;">
    <p style="float:left; display:block;" class="sentiment">Sentiment</p>
  </span>
  <span style="float:right;width: 50%;">
    <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png" style="width:20px;height:20px;">
  </span>
</div>

http://jsfiddle.net/BMv5u/59/

Answer 1

尝试为每个子元素添加内联块：

<div>
  <p style="display:inline-block;" class="sentiment">Sentiment</p>
  <img style="width:20px;height:20px;display:inline-block" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png">
</div>

Answer 2

将每个元素的display设置为img，将p设置为inline-block，然后将图片的vertical-align属性设置为{{ 1}}。

注意：考虑使用middle代替External CSS

在这里测试

＆＃13;

Inline CSS

＆＃13;

img{
  display:inline-block;
  height: 20px;
  vertical-align: middle;
 }
 
 p{
   display:inline-block;
 }

＆＃13;

Answer 3

您可以在img上使用align属性。检查fiddle here

<p >
  <img  src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png" ALIGN="right" alt="">
    Sentiment  
</p>

在线显示<img/>和<p>

3 个答案: