html5：在圖片下方添加文字

Question

我是HTML編程新手。 請參考下面的代碼：

<div data-role="content" data-mini="true" > 
    <div class="content-primary"> 
    <input type="image" src="images/mobile.png" style="width:100px; padding:5px; background:#fff; border:1px solid #999;" value="Input" type="image" onclick="mobileClicked()" data-role="none" /> 
    <span style="clear:both">Mobile</span> 
    </div> 
</div> 

所有我想要的是獲取圖像下方的文本。

Answer 1

有很多方法可以實現這一點;如果你不嫁給使用span標籤，一種可能性是將其更改爲一個p標籤（的jsfiddle這裏：http://jsfiddle.net/tuanderful/WcU2M/）這甚至允許你刪除clear: both

<div data-role="content" data-mini="true" > 
    <div class="content-primary"> 
    <input type="image" src="images/mobile.png" style="width:100px; padding:5px; background:#fff; border:1px solid #999;" value="Input type=image" onclick="mobileClicked()" data-role="none" /> 
    <p style="">Mobile</p> 
    </div> 
</div> 

如果你堅持使用當前的結構，我注意到你在標題上有一個clear: both ......我將float: left添加到標題以及輸入。

<div data-role="content" data-mini="true" > 
<div class="content-primary"> 
<input type="image" src="images/mobile.png" style="width:100px; padding:5px; background:#fff; border:1px solid #999;float: left" value="Input type=image" onclick="mobileClicked()" data-role="none" /> 
<span style="float: left; clear:both">Mobile</span> 
</div> 
</div>