1

我正在使用带有缩略图的 Jquery Mobile 列表视图。在这个列表视图中，我将有另一个列表视图，它再次使用缩略图并且也设置为插入（外部列表视图不是插入）

我的代码工作正常，但我希望能够在第一个列表视图中使用缩略图下的空间，以便我的内部列表视图的宽度是屏幕的宽度。

这是我所拥有的 JSFiddle，您可以从中看到我想要实现的目标：

http://jsfiddle.net/DonalRafferty83/NHku5/1/

JSFiddle 的代码如下：

<ul data-role="listview" data-inset="true">
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Broken Bells</h2>
                        <p>Broken Bells</p></a>
                    </li>
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Warning</h2>
                        <p>Hot Chip</p></a>
                    </li>
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Wolfgang Amadeus Phoenix</h2>
                        <p>Phoenix</p>

                        <ul data-role="listview" data-inset="true" style="width:100%;margin-top:50px;">
                            <li><img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" /><h2>Wolfgang Amadeus Phoenix</h2>
                        <p>Phoenix</p></li>
                        </ul>
                        </a>
                    </li>
                </ul>

从 JSFiddle 可以看出，内部列表元素只占用了大约 75% 的空间，并且位于外部列表视图元素中缩略图的右侧。我的猜测是，当在列表视图元素中使用缩略图时，JQM 会像这样对齐所有内容？

所以我的问题是 - 有没有一种简单的方法可以让内部列表视图元素占据 100% 的宽度并出现在外部列表视图元素的缩略图下？

4

1 回答 1

1

您需要首先将第二个列表视图包装在任何元素中，例如span；否则，它将被转换为嵌套 Listview。

li为包装列表视图的元素提供idor class，因为您将仅覆盖此特定元素的样式。

<li class="custom-li">
  <span>
    <ul data-role="listview">
      <li>Item</li>
    </ul>
  </span>
</li>

  1. 链接列表视图：

    您只需要重新定位parent 的链接图标li。

    .custom-li .ui-icon-arrow-r {
  top: 20% !important;
}

    演示

  2. 只读列表视图：

    删除padding父元素，li然后仅应用于padding-left“直接”子元素，p并且h2; 然后重新定位第二个ul。

    .custom-li {
  padding: 0;
}

.custom-li > p, .custom-li > h2 {
  padding-left: 100px;
}

.custom-li .ui-listview {
  margin-top: 34px;
}

    演示

于 2014-04-22T15:47:48.130 回答