浮动复选框旁边的div

时间:2017-02-13 18:56:10

标签: html css

我有一个设置宽度的容器div,其中包含一个复选框和一个标签。问题是复选框下面的标签不是浮动,而是复选框旁边的标签。如何使标签浮动在复选框旁边。这是HTML和CSS,我在这里有一个jsFiddle

            var sensors = ['light','audio','o2'];
            for (sensor_idx in sensors) {
                var sensor = sensors[sensor_idx];
                $(".knobs-row").append(
                    $('<div class="col-md-3 col-sm-6 centered">' +
                    '   <center>' +
                    '       <h2>' + sensor + '</h2>' +
                    '       <div ng-controller="' + sensor + '-knobCtrl">' +
                    '           <ui-knob  value="value" options="options"></ui-knob>' +
                    '       </div>' +
                    '   </center>' +
                    '</div>') )

                app.controller(sensor + '-knobCtrl', function ($scope) {
                    $scope.value = 65;
                    $scope.options = {
                        barWidth: 40,
                        size: 300,
                    };
                    $scope.$watch( "value", function(n,o,s) { do_something_dependent_on_sensor_type() }, true);
                });
            }

3 个答案:

答案 0 :(得分:1)

您可以从TheCheckboxLabel移除浮动并将显示更改为block。示例:https://jsfiddle.net/7np4y68k/2/

答案 1 :(得分:1)

仅浮动#TheCheckbox,并在overflow: hidden;上添加#TheCheckboxLabel

#CheckboxContainer {
  width: 300px;
  margin: 20px auto;
  background: red;
  overflow: hidden;
}
#TheCheckbox {
  float: left;
  margin: 10px 10px;
}
#TheCheckboxLabel {
  margin: 10px 10px;
  overflow: hidden;
}
<div id="CheckboxContainer">
  <input type="checkbox" id="TheCheckbox" />
  <div id="TheCheckboxLabel">
    This text should float next to the checkbox instead of being under.
  </div>
</div>

答案 2 :(得分:0)

Flexbox可以轻松实现这一目标。

#CheckboxContainer{width:300px;margin:20px auto;background:red;display:flex;}
<div id="CheckboxContainer">
<input type="checkbox" id="TheCheckbox" />
<div id="TheCheckboxLabel">
This text should float next to the checkbox instead of being under.
</div>
</div>