html - 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>