Link inline mit horizontalen Optionsfeldern platzieren

Question

Ich versuche, eine Info-Schaltfläche neben meine jquery-Optionsfeld-Steuerelemente zu platzieren, und ich kann nicht herausfinden, wie es geht. Der nächste, den ich bekam, war das Hinzufügen von style = "float: left;" zum Tag, aber das vermasselt die Legende. Ich möchte, dass es genauso aussieht wie normal, nur mit der Info-Schaltfläche direkt rechts neben den Steuerelementen. Ich bin nicht großartig mit CSS, also würde jede Hilfe sehr geschätzt werden!

<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

Nehmen, um den direkten Container-flex statt:

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 */ 
} 

Fügen Sie diese:

legend { 
flex:0 0 8em; 
} 

http://autoprefixer.github.io/

Answer 2

Zunächst sollten Sie einige Klassen hinzufügen. Auf diese Weise können Sie Ihr Markup genau ausrichten. Wechsel:

<div data-role="fieldcontain"> 

zu

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

Dann Verwendung Flexbox zu verteilen untergeordneten Elemente dieses gleichmäßig 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 */ 
}