如何使圖像和文本內聯？

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

如何使圖像和文本內聯？

回答

相關問題