将 link 与水平单选按钮内联

Question

我想在 jquery 单选按钮控件旁边放置一个信息按钮，但我不知道该怎么做。我得到的最接近的是在标签中添加 style="float:left;" ，但这弄乱了图例。我希望它看起来和平时一样，只是信息按钮直接位于控件的右侧。我对 CSS 不是很好，所以任何帮助将不胜感激！

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Pass Keys:</legend>
                        <input type="radio" name="OTonoff" id="OTon" value="on">
                        <label for="OTon">On</label>
                        <input type="radio" name="OTonoff" id="OToff" value="off">
                        <label for="OToff">Off</label>           
</fieldset>
<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext"></a>
</div>

https://jsfiddle.net/7wr13xv9/

Answer 1

首先，您应该添加一些类。这样您就可以准确地定位您的标记。变化：

<div data-role="fieldcontain">

到

<div class="fieldcontain" data-role="fieldcontain">

然后，使用flexbox将这个div的子元素均匀分布。

.fieldcontain {
display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

Answer 2

改为将 flex 应用于直接容器：

fieldset {
display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

添加这个：

legend {
flex:0 0 8em;
}

http://autoprefixer.github.io/

将 link 与水平单选按钮内联

placing link inline with horizontal radio buttons

css

jquery-mobile