JQuery Mobile просмотр списка с кнопкой разделения

Question

Я использую JQM listview, и он отлично работает, как показано на рис. 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, как показано на рис. 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>

Можно ли разделить "Кнопку B" и "Кнопку C" линией на Рис.2, как на Рис.1, но использовать только одну кнопку разделения?

Answer 1

У меня есть быстрое и грязное решение, которое может относиться к вашему делу. Заменить </br> с

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

в стиле так:

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

Если просмотр списка генерируется динамически, вы должны реализовать это программно.