设置表单字段标签宽度并将复选框设置为右侧

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来包装整个内容并设置一个固定的宽度并将交换机浮动到右边检查下面的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;