如何在复选框和标签旁边制作一个div棒？

时间：2017-11-08 02:23:43

标签： html css

这是示例http://jsfiddle.net/TX8fs/1/

我试过

display:block;float:left;

但是紧急输入复选框将与它前面的2输入重叠。解决这个问题的解决办法？我想在标签旁边显示紧急输入复选框。

2 个答案:

答案 0 :(得分：1)

这样的东西？ 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&nbsp; </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>

答案 1 :(得分：0)

最简单的解决方案是简单地使.select-style成为inline-block而不是inline元素，如 here 。< / p> 

.select-style {
  display: inline-block;
}

.onoffswitch {
  position: relative;
  width: 136px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.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&nbsp; </label>

<!-- dropdown menu -->
<div class="select-style">
  <div class="onoffswitch">
    <input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
    <label class="onoffswitch-label" for="#a">
      <span class="onoffswitch-inner"></span>
      <span class="onoffswitch-switch"></span>
    </label>
  </div>
</div>

但是，如果您还想确保所有三个元素都垂直对齐，您还需要将vertical-align: middle添加到所有三个元素：

input, input + label, .select-style {
  vertical-align: middle;
}

结果如下：

.select-style {
  display: inline-block;
}

.onoffswitch {
  position: relative;
  width: 136px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

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

input, input + label, .select-style {
  vertical-align: middle;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc&nbsp; </label>

<!-- dropdown menu -->
<div class="select-style">
  <div class="onoffswitch">
    <input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
    <label class="onoffswitch-label" for="#a">
      <span class="onoffswitch-inner"></span>
      <span class="onoffswitch-switch"></span>
    </label>
  </div>
</div>

希望这有帮助！ ：）

相关问题
最新问题