web-dev-qa-db-ja.com

HTMLチェックボックスを幅の左側に移動します

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

チェックボックスに追加して、200ピクセル幅の左側に表示するCSSは何ですか？私はフロート（特に垂直方向の配置）で少し苦労していますが、それは正しい習慣だと聞きます。 chrome showing check box width

編集：OKですので、多くの人が入力を右にフロートしないことを提案しています。その場合、フロートをまったく使用せず、ラベルの幅を設定して、
各行の後。これは受け入れられる慣習でしょうか、それとも私はここでフロートを使い損ねているだけですか？

htmlcsscheckboxcss-floatforms
17
Connel

これを試してみてください、ここにデモがあります link

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

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

}

.clear {
    clear: both;
}
5
sourcecode

入力width:200pxだからあなたがする必要があるのはwidth:autoそのid（autologin）によってチェックボックスに。また、チェックボックス用の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;
}

このヘルプを願っています:)

14
Visal Chhourm

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

input[type=checkbox] { width: auto }

8
sevenseacat

（ユーザー提供の）表形式データがあるため、これには表が適しています。これにより、垂直方向の配置の問題も解決されます。

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

0
Niet the Dark Absol

Float属性手段を使用している場合、フォームコンテナに幅を指定する必要があります。

0
uvinod

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の例を参照してください。

0
Onur Yıldırım

チェックボックスには添付ファイルがなく、単なるボックスであるため、チェックボックスの方向を揃えたり変更したりすることはできません。

これを行うには、単にdivに入れてdivにこのスタイルを指定します：

.checkDIV
{
    text-align:left;
}

例：

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