Question

我有以下代码：

<div class="w25">
   <span>True</span>
   <input data-ng-model="answer.correct" 
          type="checkbox">
</div>

div约为150px宽。结果是输入出现在中心，每侧大约70px。

如何让<input>向左移动？

Answer 1

 <input data-ng-model="answer.correct" style="float:left" type="checkbox">

Answer 2

默认情况下，

span和input元素都是内联的，并且checbox将放在span元素旁边。我假设没有进一步的样式应用于任何元素。如果是，请发布您的CSS。

如果您想要将复选框放在左侧，您可以：

转动量程并输入（先输入，然后输入）
将输入浮动到左侧（style =“float：left;”）
使用显式定位（例如postition: absolute; left: 0;）

作为illustrated here

Answer 3

您的div inherit可能有class="w25"个样式。但你可以试试这个：

更改订单：

<div class="w25">
  <input data-ng-model="answer.correct" type="checkbox">
  <span>True</span>
</div>

两个在CSS上添加此属性以确保每个元素都具有正确的属性：
```
.w25 input, .w25 span {
  margin:0;
  padding:0;
  vertical-align:middle;
}
```

观看此演示 http://jsfiddle.net/W7YE7/1/

Answer 4

首先，更改输入和跨度的位置（如果可以的话）并查看它是否有效：

<div class="w25">
  <input data-ng-model="answer.correct" type="checkbox">
  <span>True</span>
</div>

如果不起作用，请尝试更改输入：

<input data-ng-model="answer.correct" style="float: left" type="checkbox">

如果它也不起作用，请尝试：

<div class="w25">
  <div style="width:70px; display: inline;"><span>True</span></div>
  <div style="float:left; width:70px; display: inline;"><input data-ng-model="answer.correct" type="checkbox"></div>
</div>

Answer 5

您可以添加CSS样式float: left; 通常，将样式放在单独的CSS文件中而不是内联是更好的做法，因此如果可以这样做，请为输入分配一个类，如下所示：

<div class="w25">
<span>True</span>
<input class="yourclass" data-ng-model="answer.correct" type="checkbox">
</div>

在css文件中：

.yourclass {float: left;}

这里有JsFiddle：http://jsfiddle.net/A52nS/

Answer 6

试试这个css

.w25{
float:left;
}

如何让复选框输入位于<div>？</div>的左侧

6 个答案: