带分裂按钮的JQuery Mobile listview

Question

我正在使用JQM listview，它可以正常工作Fig. 1 ，代码如下：

<ul data-role="listview" data-inset="true" data-split-icon="gear">
  <li>
    <a href="#">
      <h3>Button A</h3>
      <p>Button A</p>
    </a>
    <a href="#">Set Button A</a>
  </li>
  <li>
    <a href="#">
      <h3>Button B</h3>
      <p>Button B</p>
    </a>
    <a href="#">Set Button B</a>
  </li>
  <li>
    <a href="#">
      <h3>Button C</h3>
      <p>Button C</p>
    </a>
    <a href="#">Set Button C</a>
  </li>
</ul>

我试图将按钮B和按钮C的一个拆分按钮用作Fig. 2。
代码如下：

<ul data-role="listview" data-inset="true" data-split-icon="gear">
  <li>
    <a href="#">
      <h3>Button A</h3>
      <p>Button A</p>
    </a>
    <a href="#">Set Button A</a>
  </li>
  <li>
    <a href="#">
      <h3>Button B</h3>
      <p>Button B</p>
      </br>
      <h3>Button C</h3>
      <p>Button C</p>
    </a>
    <a href="#">Set Button B and C</a>
  </li>
</ul>

是否可以分开＆＃34;按钮B＆＃34;和＆＃34;按钮C＆＃34;图2中的线与图1中的线相同，但只使用一个分割按钮？

Answer 1

我有一个快速＆amp;脏的解决方案，可能适用于您的情况。将</br>替换为

<div class="separator"></div>

样式如下：

.separator
{
    border-top: 1px solid lightgray;
    margin: 0px;
    position: relative;
    left: -50px;
    width: 200%;
}

如果动态生成列表视图，则必须以编程方式实现。