Question

我希望在控制组（在我的例子中是单选按钮）中显示每个选项的图像。如果我将每个图像放在适当的标签内，如下所示：

<li data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose a posting:</legend>
        <input type="radio" name="edit-DPOST_posting" id="edit-DPOST_posting-0" data-mini="true" data-theme="f"/>
        <label for="edit-DPOST_posting-0"><img src="my_img/iplacard.png" style="vertical-align:middle">INSPECTED (Green placard)</label>        
        <input type="radio" name="edit-DPOST_posting" id="edit-DPOST_posting-1" data-mini="true" data-theme="g"/>
        <label for="edit-DPOST_posting-1"><img src="my_img/rplacard.png" style="vertical-align:middle">RESTRICTED USE (Yellow placard)</label>
    </fieldset>
</li>

整个组（包括图例）向右移动，就像为缩略图留下空间一样：

如果我在各自的input元素之前移动图像：

<li data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose a posting:</legend>
        <img src="my_img/iplacard.png" style="vertical-align:middle">
        <input type="radio" name="edit-DPOST_posting" id="edit-DPOST_posting-0" data-mini="true" data-theme="f"/>
        <label for="edit-DPOST_posting-0">INSPECTED (Green placard)</label>
        <img src="my_img/rplacard.png" style="vertical-align:middle">
        <input type="radio" name="edit-DPOST_posting" id="edit-DPOST_posting-1" data-mini="true" data-theme="g"/>
        <label for="edit-DPOST_posting-1">RESTRICTED USE (Yellow placard)</label>
    </fieldset>
</li>

然后每个图像在关联的input之前出现在它自己的行上。如果我将它们放在后面，它们会出现在每个关联的input之后。

如果我将图像留下，一切都显示正常，但不显示我想要显示的图像。

如何在不向右移动的情况下让图像显示在组中的每个项目中？我正在使用JQM 1.4.2。

UPDATE ：不确定这是否重要，但我使用的是jQuery 1.9.1，这里是周围的背景：

<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed" data-theme="b">
            <a href="index.html" data-transition="slide" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all">Back</a>
            <h1>ATC-20 Rapid</h1>
        </div>
        <div role="main">
            <form id="myform">
                <div id="mycolset" data-role="collapsibleset" data-filter="false">
                   <div data-editsec="post" data-role="collapsible">
                        <h2>Posting</h2>
                        <div><ul data-role="listview">
                        <!-- My <li> goes in here -->
                        </ul></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

UPDATE＃2 ：除了JQM＆amp; ThemeRoller生成的主题不应该影响这个：

@media all and (min-width: 30em) {
    .list-breakpoint img { border: solid #888 1px; }
    .list-breakpoint i { display: none; }
}
@media all and (max-width: 30em) {
    .list-breakpoint img { display: none; }
    .list-breakpoint a.ui-btn { padding-left: 1em !important; }
}

jquery移动控制组项

0 个答案: