JQuery Mobile просмотр списка с кнопкой разделения
Я использую 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, но использовать только одну кнопку разделения?
1 ответ
Решение
У меня есть быстрое и грязное решение, которое может относиться к вашему делу. Заменить </br>
с
<div class="separator"></div>
в стиле так:
.separator
{
border-top: 1px solid lightgray;
margin: 0px;
position: relative;
left: -50px;
width: 200%;
}
Если просмотр списка генерируется динамически, вы должны реализовать это программно.