Question

我试图在同一行显示图像和一些文本，图像和文本都是可点击的，并指向一些链接。我使用的是jquery.mobile-1.0a4.1 但是下面的代码显示Stuff1和Description与Image重叠，因此图像位于前面，文本位于背景中。我希望将图像和文本放在一起，下面的代码中可能出现什么问题？

   <li> 
<img src="images/someImage.png" /> 
<h3><a href="#someID" >Stuff1</a></h3> 
<p>Some Description</p> 
<a href="#someID" >Stuff2</a> 
</li>

Answer 1

在jQuery.mobile网站上的示例中，您必须在链接中包含li的整个内部html，如下所示：

<li> 
  <a href="#someID">
    <img src="images/someImage.png" /> 
    <h3>Stuff1</h3> 
    <p>Some Description</p>
  </a>
</li>

但是，您可能会尝试在一个li标记中使用两个不同的链接。在移动应用程序中，这实际上是不可行的（但我可能会对你要做的事情做错）

参考： http://jquerymobile.com/demos/1.0a4.1/docs/lists/lists-thumbnails.html

Answer 2

将float设置为所有内容。如果可能的话，在div内插入除图像之外的所有内容，然后将img和div设置为float: left。像：

<li> 
 <img src="images/someImage.png" /> 
 <div>
  <h3><a href="#someID" >Stuff1</a></h3> 
  <p>Some Description</p> 
  <a href="#someID" >Stuff2</a> 
  </div>
</li>

和CSS：

li img{float:left;}
li div{float:left;}

jquery mobile中的HTML li标签问题

2 个答案: