html - チェックボックスの入力を左側に配置するにはどうすればよいですか?

Question

次のコードがあります。

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

div の幅は約 150px です。何が起こるかというと、入力が中央に表示され、各辺が約 70px になります。

<input>を左に移動するにはどうすればよいですか?

Answer 1

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 2

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

Answer 3

spanおよびinput要素はデフォルトで両方ともインラインであり、チェックボックスは span 要素の隣に配置されます。どの要素にもそれ以上のスタイリングは適用されないと思います。もしそうなら、あなたのcssを投稿してください。

チェックボックスを左側に配置する場合は、次のいずれかを実行できます。

• スパンを回して入力（先に入力してからスパン）
• 入力を左にフロートします (style="float: left;")
• 明示的な配置を使用する (例: postition: absolute; left: 0;)

ここに示すように

Answer 4

おそらくinherit、あなたの div からのスタイルがありますclass="w25"。しかし、これで試すことができます：

• 1 つの順序を変更します。

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

• 次の 2 つのプロパティを CSS に追加して、各要素が正しいプロパティを持つようにします。

  .w25 input, .w25 span {
    margin:0;
    padding:0;
    vertical-align:middle;
  }
  

このデモを見るhttp://jsfiddle.net/W7YE7/1/

Answer 5

まず、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 6

このcssを試してください

.w25{
float:left;
}