jquery - CSS定位元素

Question

我正在使用 jquery mobile 构建一个移动网络应用程序。现在我有什么。我有一个可协作元素，就像您在 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到实际页面。

亲切的问候，

史蒂夫

Answer 1

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

换句话说，你的第二组(如果你有更多结果，还有第三、第四等)图标集在那里，但它们与前两个图标位于同一位置:距离顶部正好 290 像素和 360 像素页面的。

相反，将带有图标的 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>