<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
这是样本 http://jsfiddle.net/TX8fs/1/
我试过了
display:block;float:left;
但紧急输入复选框会与它前面的 2 个输入重叠。有解决这个问题的方法吗？我想在标签旁边显示紧急输入复选框。
最佳答案
是这样的吗？ jsfiddle
注意:只是调换了div中HTML元素的顺序，并添加了“float: left;”到**
.select-style{
display: inline;
}
.onoffswitch {
position: relative; width: 136px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
float: left; /* ** added line ** */
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 0px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 19px; padding: 0; line-height: 15px;
font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 12px; margin: 0px;
background: #A1A1A1;
position: absolute; top: 0; bottom: 0;
right: 124px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #A1A1A1;
} <!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
<!-- Switch order of checkbox and switch-->
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
</div>
</div>关于html - 如何在复选框和标签旁边制作一个 div 棒？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47170563/