フォームフィールドのラベルの幅を設定し、チェックボックスを右に揃えます

Question

入力ラベルに幅の制限を設定すると同時に、スタイル付きのチェックを右に揃えようとしています。

これは私が使用しているHTMLです：：

下の画像は、現在見て、どのように私はそれを見たいのですが方法を示し

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

私がしました https://jsfiddle.net/bywgqnrg/1/

任意のものを作成できますこれを行う最善の方法をアドバイスしますか？ おかげ

Answer 1

がここに可能な解決策だ、私は、全体のコンテンツをラップするfieldwrapを追加し、一定の幅を設定し、右下のコードをチェックするためにスイッチを浮かべ：

.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>