我有一个设置宽度的容器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);
});
}
答案 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>