HTMLチェックボックスを左端に移動

Question

JavaScriptを使用することはできません。は、可能であればCSSで回答を希望します。私は、フォームで次のチェックボックスがあります。

<label for="autologin">Remember Me</label> 
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> 
<div class="clear"></div> 

次のCSSを：

label { 
    float: left; 
    margin: 5px 0px; 
} 

input { 
    float: right; 
    margin: 5px 0px; 
    width: 200px; 
} 

.clear { 
    clear: both; 
} 

私はそれがそのの左側に表示されるようにするためのチェックボックスに追加することができますどのようなCSS 200pxの幅ですか？私は浮動小数点（特に垂直整列）で少し苦労しているが、それは正しい練習だと聞いている。

編集：はい、多くの人が入力を右に浮かべないように提案しています。もしそうなら、フロートを一切使用せず、ラベルの幅を設定して、各行の後に
としてください。これは受け入れられる練習か、私はちょうどここで浮動小数点を使用していますか？

Answer 1

ここにあなたができるデモlink

label { 
    float:left; 
    margin: 5px 0px; 
} 

input { 
    // float right; 
    margin: 5px 0px; 
    width: 200px; 

} 

.clear { 
    clear: both; 
} 

Answer 2

（ユーザーが提供する）表形式のデータがあるため、このためのテーブルは問題ありません。これにより、垂直方向の位置合わせの問題も解決します。

残念ながら、幅の左側にチェックボックスを置くことはできません。個人的には、[type=something]を指定せずに、スタイリングinputを避けることをおすすめします。しかし、このようなemail、number、urlなどとしてHTML5の入力タイプの多くを使用している場合、あなたはスタイルにそれが役に立つすべてinput一つの方法を見つけることができ、その後、[type=radio]ためwidth:autoと[type=checkbox]

Answer 3

が20ピクセルを好きにその幅を設定して使用し、問題を解決します。それは200pxである必要はありませんか？

Answer 4

「幅の左側に移動」しないでください。必要に応じて、独自の幅を指定し、右側にパディングを追加します。しかし、あなたのデザインから判断すると、あなたはそうではありません。

input[type=checkbox] { width: auto }

Answer 5

あなたはフロート属性手段を使用している場合は、フォームコンテナに幅を提供する必要があります。

Answer 6

inputクラス宣言では、float: right;とwidth: 200px;を削除する必要があります。そして、2番目の列を揃えるために、すべてのラベル（つまり200ピクセル）の幅を設定します。

label { 
    float: left; 
    margin: 5px 0px; 
    width: 200px; 
} 

input { 
    /*float: left;*/ /* This will also work. */ 
    margin: 5px 0px; 
} 

.clear { 
    clear: both; 
} 

jsFiddle Example参照してください。

Answer 7

入力をwidth:200pxに設定しているため、チェックボックスが中央になる問題は、そのID（自動ログイン）によってチェックボックスにwidth:autoを追加することだけです。また、チェックボックスのdivコンテナを作成する必要があります。ここではHTMLは次のとおりです。

<label for="autologin">Remember Me</label> 
<div id='check'><input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"></div> 
<div class="clear"></div> 

、ここでは、CSSです：

label { 
    float: left; 
    margin: 5px 0px; 
} 

input { 
    float: right; 
    margin: 5px 0px; 
    width: 200px; 
    border:solid 1px; 
} 
#autologin 
{ 
width:auto; 
float:left; 
} 
#check 
{ 
float:right; 
width:200px; 
border:solid 1px; 
} 

.clear { 
    clear: both; 
} 

・ホープ、この助け:)

Answer 8

だ、これを試してみてくださいチェックボックスの方向を調整したり変更したりするのは、添付ファイルがないため、単なるボックスです。これは単に成し遂げるためには

はdivの中にそれを入れて、DIVにこのスタイルを与える：

.checkDIV 
{ 
    text-align:left; 
} 

は例：

<div align="center" class="checkDIV"> 
    <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> 
</div>