如何使图像和文本内联？

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

我要让向下箭头形象和策略文本对齐左侧和第二arrowdown图像和接收文本对齐正确的，但在同一line.I希望所有这两个图像和两个文本在同一行。可以帮我安排吗？提前致谢。

来源

2012-08-01 Ekta Shukla

PLZ张贴在CSS节这个问题。将图片用作背景图片，并为不同的位置使用不同的课程。 – SVS 2012-08-01 06:59:45

你有两个具有相同ID的元素。这是无效的html。改用类。 – Daedalus 2012-08-01 07:04:00

希望这添加CSS是你想要什么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; 
}

来源

2012-08-01 07:05:05 Uttara

这样

#policydoc img { 
float: left; 
} 

#policydoC#policytext{ 
float: right; 
}

来源

2012-08-01 07:01:12 thecodejack

由于@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

来源

2012-08-01 07:07:56 Daedalus

如何使图像和文本内联？

回答

相关问题