html - 如何让复选框输入位于左侧?

Question

我有以下代码：

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

div 大约 150 像素宽。发生的情况是输入出现在中心，每边大约 70px。

我怎样才能让<input>左转？

Answer 1

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

Answer 2

span和input元素默认都是内联的，checkbox会放在span元素旁边。我假设没有对任何元素应用进一步的样式。如果是，请发布您的CSS。

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

• 翻转span并输入（先输入，后span）
• 将输入向左浮动 (style="float: left;")
• 使用显式定位（例如postition: absolute; left: 0;）

如此处所示

Answer 3

可能你inherit的 div 有样式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

首先，改变 input 和 span 的位置（如果可以的话），看看它是否有效：

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