jquery - 如何使图像和文本内联？

Question

我的 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>

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

Answer 1

像这样添加CSS

#policydoc img {
float: left;
} 

#policydoc #policytext{
float: right;
} 

Answer 2

希望这是你想要的小提琴

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;
}​

Answer 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;
}

演示

Answer 4

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

Adiv就像一个元素span。我认为span跨越屏幕（我说英语，所以从左到右）。无论如何，span它是专门为内嵌元素和div块创建的。

实际上，您可以div内联放置，但是，您确实会以一种不自然的方式弯曲 HTML。恕我直言，in-linediv是天生的怪胎，应该被殴打直到变成span.