设置表单字段标签宽度并将复选框向右对齐答案

【问题标题】：Setting form field label width and align checkbox to right设置表单字段标签宽度并将复选框向右对齐
【发布时间】：2016-11-01 03:14:23
【问题描述】：

我正在尝试在输入标签上设置宽度限制，同时将样式检查向右对齐。

下图显示了它当前的外观以及我希望它的外观：

这是我正在使用的 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/

任何人都可以建议最好的方法吗？谢谢

【问题讨论】：

标签： html css forms alignment

【解决方案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>

【讨论】：

太棒了 - 这正是我想要的......谢谢:)