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は何ですか?私はフロート(特に垂直方向の配置)で少し苦労していますが、それは正しい習慣だと聞きます。
編集:OKですので、多くの人が入力を右にフロートしないことを提案しています。その場合、フロートをまったく使用せず、ラベルの幅を設定して、
各行の後。これは受け入れられる慣習でしょうか、それとも私はここでフロートを使い損ねているだけですか?
これを試してみてください、ここにデモがあります link
label {
float:left;
margin: 5px 0px;
}
input {
// float right;
margin: 5px 0px;
width: 200px;
}
.clear {
clear: both;
}
入力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;
}
このヘルプを願っています:)
「幅の左側に移動」しないでください-独自の幅を指定し、必要に応じて右側にパディングを追加してください。しかし、デザインから判断すると、そうではありません。
input[type=checkbox] { width: auto }
(ユーザー提供の)表形式データがあるため、これには表が適しています。これにより、垂直方向の配置の問題も解決されます。
残念ながら、幅の左側にチェックボックスを配置することはできません。個人的には、[type=something]
を指定せずにinput
のスタイリングを避けることをお勧めします。ただし、email
、number
、url
など、多くのHTML5入力タイプを使用する場合は、すべてのinput
のスタイルを設定すると便利です。方法は、width:auto
と[type=radio]
に[type=checkbox]
を使用します
Float属性手段を使用している場合、フォームコンテナに幅を指定する必要があります。
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の例を参照してください。
チェックボックスには添付ファイルがなく、単なるボックスであるため、チェックボックスの方向を揃えたり変更したりすることはできません。
これを行うには、単にdivに入れてdivにこのスタイルを指定します:
.checkDIV
{
text-align:left;
}
例:
<div align="center" class="checkDIV">
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
</div>