我正在用jquery mobile构建一个移动webapp。现在我有了。我有一个可协作的元素,就像您在this link上看到的那样。现在,对于我从数据库中获得的每条记录,它将创建一个新的可协作元素。这是我可协作元素的代码。

<div data-role="collapsible">
            <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3>
                <div id="buttons">
                    <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~</a>
                    <img style="position:absolute;top:290px;right:45px;" src="images/mailIcon.png" width=32 height=32 />
                    <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~</a>
                    <img style="position:absolute;top:360px;right:45px;" src="images/phoneIcon.png" width=32 height=32 />

                </div>
            </div>


我有2个图像,分别是电话图标和邮件图标。就像上面的位置一样,它们仅位于我的第一个可协作元素中的前两个按钮上。但是我该怎么做才能使这些按钮也出现在我的后续按钮上?

所以我的问题是,如何将这两个按钮定位到ID为“ buttons”的div上。

- 编辑 -
这是实际页面的link

亲切的问候,

斯蒂夫

最佳答案

正如我所怀疑的,图标的绝对定位是罪魁祸首。您正在使用position:absolute和顶部偏移量定位两个图标,但是在其周围没有position:relative元素。这意味着定位起点回落到页面顶部。

换句话说,这里有第二个图标(如果有更多结果,则还有第三个,第四个,等等),但是它们与前两个图标位于同一位置:距页面顶部分别为290px和360px 。

而是将带有图标的img放置在每个项目的<a>元素内,并相对于其周围环境定位。这可能会工作:

<div data-role="collapsible">
   <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3>
       <div id="buttons">
          <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~
              <img style="float:right;margin:5px 15px" src="images/mailIcon.png" width=32 height=32 />
          </a>

          <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~
              <img style="float:right;margin:5px 15px" src="images/phoneIcon.png" width=32 height=32 />

          </a>
            </div>
        </div>

关于jquery - CSS定位元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9868842/

10-11 23:30
查看更多