如何使图像和文本内联？答案

【问题标题】：How to make image and text inline?如何使图像和文本内联？
【发布时间】：2018-12-28 01:10:34
【问题描述】：

我的 HTML 代码是

<div id="policydoc" >
    <img src="images/arrowdown.png" />   
    <div id="policytext">Policy</div>  
    <img src="images/arrowdown.png" />   
    <div id="policytext">Receipt</div>  
</div>

我想让向下箭头图像和策略文本对齐左侧，第二个向下箭头图像和收据文本向右对齐但在同一行中。我希望所有这两个图像和两个文本在同一行中。任何一个都可以帮我安排一下？提前致谢。

【问题讨论】：

请在 CSS 部分发布这个问题。使用图像作为背景图像并为不同的位置使用不同的类。
您有两个具有相同 id 的元素。这是无效的 html。改用类。

标签： jquery css jquery-mobile

【解决方案1】：

希望这是你想要的fiddle

html

<div id="policydoc" >
    <div class="left">
        <img src="images/arrowdown.png" />   
        <div class="policytext">Policy</div>
    </div>
    <div class="right">    
        <img src="images/arrowdown.png" />   
        <div  class="policytext">Receipt</div> 
    </div>
</div>

css

.policytext{
  display: inline-block;
}
.left{
   float:left;
}
.right{
   float:right;
}

【讨论】：

【解决方案2】：

像这样添加 CSS

#policydoc img {
float: left;
} 

#policydoc #policytext{
float: right;
}

【讨论】：

【解决方案3】：

正如@Dipaks 所说，您应该使用display: inline-block;，但是，您目前也有无效的html 标记：

<div id="policydoc" >
    <img src="images/arrowdown.png" />   
    <div class="policytext">Policy</div>  
    <img src="images/arrowdown.png" />   
    <div class="policytext">Receipt</div>  
</div>

这就是您的 html 的外观；如果您要使用 ID，它们必须是唯一的。如果不是类似的，您的 css 文件当然应该包含以下内容：

div.policytext {
    display: inline-block;
}

DEMO

【讨论】：

【解决方案4】：

如果您尝试使用 div 将元素内联放置，则您使用 div 错误并且不完全理解创建 div 的范例。

div 就像一个元素 span。我认为span 横跨屏幕（我是说英语的，所以从左到右）。总之，span 是专门为内联元素创建的，div 是为块创建的。

您确实可以将div 内联，但是，您确实会以一种不自然的方式弯曲HTML。恕我直言，内联div 是自然的怪胎，应该被殴打直到变成span。

【讨论】：