Einstellung der Feldbreite der Feldbeschriftung und Ausrichtung der Feldmarkierung nach rechts

Question

Ich versuche, eine Breite für ein eingegebenes Etikett festzulegen und gleichzeitig einen gestylten Scheck rechts auszurichten.

Das Bild unten zeigt, wie es aussieht, zur Zeit und wie ich es aussehen würde:

Dies ist die HTML Ich verwende:

<a href='#' class='tooltip' title='tooltip text.'><img src='images/tooltip.png'></a>&nbsp;<b>This is my Text Label:</b></div>&nbsp; 

<label class="switch"><input type="checkbox" name='check' id='check' title='checkbox' value="1"><div class="slider"></div></label> 

<br/><input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/></div><br/> 

Ich habe eine Geige erstellt es hier zeigt: https://jsfiddle.net/bywgqnrg/1/

Kann jeder Man rät den besten Weg, dies zu tun? Dank

Answer 1

Hier ist eine mögliche Lösung, ich habe einen fieldwrap hinzugefügt, um den gesamten Inhalt zu wickeln und setzt eine feste Breite und den Schalter schwebte nach rechts den Code überprüfen:

.switch { position:relative; display:inline-block; width:53px; height:19px } 
 
.switch input { display:none } 
 
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s } 
 
.slider:before { position:absolute; content:""; height:11px; width:19px; left:4px; bottom:4px; background-color:#fff; -webkit-transition:.4s; transition:.4s } 
 
input:checked+.slider { background-color:#008c00 } input:focus+.slider { box-shadow:0 0 1px #2196F3 } 
 
input:checked+.slider:before { -webkit-transform:translateX(26px); -ms-transform:translateX(26px); transform:translateX(26px) } 
 

 
input, select, textarea {border: 1px solid #A0A0A0; background: #FFF; padding: 3px 4px; color: #222; margin: 2px 5px 2px 0px; } 
 
input:focus, select:focus, textarea:focus { outline: none;} 
 

 

 
.fieldwrap { width : 320px; overflow : hidden; } 
 
.fieldwrap .switch {float : right;}

<div class="fieldwrap"> 
 
    <a href='#' class='tooltip' title='tooltip text.'><img src='images/tooltip.png'></a>&nbsp;<b>This is my Text Label:</b>&nbsp; 
 

 
    <label class="switch"><input type="checkbox" name='check' id='check' title='checkbox' value="1"><div class="slider"></div></label> 
 
<div><input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/></div> 
 
</div>