jquery mobile 中的 HTML li 标签问题

发布于 2024-11-01 17:58:20 字数 397 浏览 1 评论 0原文

我试图在同一行显示图像和一些文本，图像和文本都是可单击的并指向某个链接。我正在使用 jquery.mobile-1.0a4.1。
然而，下面的代码显示 Stuff1 和 Description 被图像重叠，因此图像在前面，文本在背景中。我希望图像和文本并排，下面的代码可能有什么问题？

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

原文

I am trying to display an image and some text on the same line, both the image and text are clickable and point to some link. I am using jquery.mobile-1.0a4.1.
However below code shows the Stuff1 and Description being overlapped by Image, so the image is in front and text in background. I wish to have Image and text side by side, what could be the problem in my below code ?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

姜生凉生 2024-11-08 17:58:20

在 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

In the example on the jQuery.mobile site, you have to wrap the whole of the inner html of the li in your link, like so:

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

However, it looks like you may be trying to have two different links in one li tag. In mobile application, this really isn't feasible (but I could be wrong about what you're tring to do)

Reference:
http://jquerymobile.com/demos/1.0a4.1/docs/lists/lists-thumbnails.html

回复收藏 0 原文

め七分饶幸 2024-11-08 17:58:20

将 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;}

set float to everything. Also if possible insert everything apart from the image inside a div and then set the img and the div to float: left. Like:

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

and the CSS: