Как иметь встроенные элементы в списке в jQuery mobile

Question

Я хочу иметь представление списка, которое имеет флипсуйтер, выровненный в правой части элемента списка. Вот код, я использую:

<ul> 
<li data-role="fieldcontain"><a href="#" onclick="openPlace();" >MyHyperlink</a><select name="slider" id="flip-a" data-role="slider"><option value="off">Off</option><option value="on" selected>On</option></select></li> 
</ul> 

Это работает, но будет иметь гиперссылку над swtch в элементе списка. Я попытался использовать таблицу, и это помогло сохранить их в одной строке, но это испортило стиль jquery. Как я могу это сделать, не испортив стиль?

Answer 1

Для этого нужно встроить некоторые пользовательские CSS и некоторые дополнительные HTML для этого ...

Я создал эту демонстрацию, надеюсь, что это работает для вас,

HTML: -

<ul data-role="listview" data-inset="true"> 
    <li>Acura 
     <span class="fliper"> 
      <label for="flip2" class="ui-hidden-accessible">Flip switch:</label> 
      <select name="flip2" id="flip2" data-role="slider"> 
       <option value="off">Off</option> 
       <option value="on">On</option> 
      </select> 
     </span> 
    </li> 
    <li>Audi</li> 
    <li>BMW</li> 
    <li>Cadillac</li> 
    <li>Ferrari</li> 
</ul> 

CSS: -

.fliper { position:absolute; right:0; top:-4px; } 

Работа демо: -http://jsfiddle.net/H4UzV/