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

希望这是你想要的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;
}

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

DEMO

Answer 4

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

div就像元素span。我认为span横跨屏幕（我是说英语的人，所以从左到右）。无论如何，span是专门为串联元素创建的，div是专门为块创建的。

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

如何使图像和文本内联？

4 个答案: