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>

html5：在图像下方添加文本

1 个答案: