使用jQuery Mobile的多行Listview项

Question

我无法弄清楚如何在jQuery Mobile中执行多行列表视图项目，如下图所示（其他一些信息......）

图像： https://lh3.googleusercontent.com/-GSNEPObTo2c/T4m9GbfAcgI/AAAAAAAABec/fot1TgehC6w/s279/Bildschirmfoto%25202012-04-14%2520um%252020.01.37.png

有什么想法吗？

非常感谢， 雅各布

Answer 1

如果您的li项使用以下格式：

<li>
    <a href="first.html">
      <h3>First line</h3>
      <p>Whatever goes on the second line</p>
    </a> </li>

然后将以下内容添加到CSS中：

.ui-li-desc {white-space:normal;}​

例如，请参阅此jsFiddle。

Answer 2

试试这个：

<ul data-role="listview" data-theme="g">
  <li>
    <a href="first.html">
      <h3>First line</h3>
      <p>Whatever goes on the second line</p>
    </a>
  </li>
  <li>
    <a href="second.html">
      <h3>Second line</h3>
      <p>Whatever goes on the second line</p>
    </a>
  </li>
</ul>

这是大多数jQuery Mobile示例中使用的标准方法。它甚至可以处理第二行的省略号截断。

Answer 3

.ui-listview > li p {
    white-space: normal;
}

在您自己的CSS文件中添加此代码。它有效！