jquery - 如何在 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/