1

私は次のHTMLを持っています:

<li>
   <label for="RememberMe" class="checkbox remember-me">Remember me?</label>

   <input type="checkbox" value="true" name="RememberMe">
   <input type="hidden" value="false" name="RememberMe">
</li>

このための CSS は次のとおりです。

.form label, .form .label {
    display: block;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

form input[type="radio"], form input[type="checkbox"] {
    margin-left: 0.5em;
    margin-top: 0.5em;
    padding: 0;
}

私の問題は、「Remember me」という単語が 1 行に表示され、その下にチェックボックスが表示されることです。

チェックボックスが「Remember me」という単語の左側に表示されるようにするにはどうすればよいですか。float: left を使用する必要がありますか、それともラベルが disply: block として表示されないようにする必要がありますか?

アップデート：

すべての提案をありがとう。アプリケーションのマスター CSS を実際に変更することはできません。たとえば、特定の CSS を使用して変更を加えることは可能ですか。

label.remember-me {

}

input#RememberMe {

}
4

5 に答える 5

2

ラベルの表示プロパティは である必要がありますinline-block。表示オプションの詳細については、こちらをご覧ください。

.form label, .form .label {
    display: inline-block;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

デモ:フィドル

アップデート：

.form label.remember-me{
    display: inline-block;
}

デモ:フィドル

于 2013-02-25T05:59:04.927 に答える
2

あなたは問題であるcssで使用Display:Blockしました。 それを削除すると、機能します。label

左のチェックボックス。

<li>   
<input type="checkbox" value="true" name="RememberMe"/>
<label for="RememberMe" class="checkbox remember-me">Remember me?</label>
<input type="hidden" value="false" name="RememberMe"/>
</li>

フィドルを見る

于 2013-02-25T05:59:41.047 に答える
1 
.form label, .form .label {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

form input[type="radio"], form input[type="checkbox"] {
    margin-left: 0.5em;
    margin-top: 0.5em;
    padding: 0;
}

<input type="checkbox" value="true" name="RememberMe">
<input type="hidden" value="false" name="RememberMe">
<label for="RememberMe" class="checkbox remember-me">Remember me?</label>
于 2013-02-25T06:03:59.897 に答える
0

このようなものにする必要があります：checkbox左側とremember me?右側に表示されます。

<form>
    <li>
       <input type="checkbox" value="true" name="RememberMe">
       <label for="RememberMe" class="checkbox remember-me">Remember me?</label>
       <input type="hidden" value="false" name="RememberMe">
    </li>
</form>
于 2013-02-25T06:04:36.433 に答える
0

フォーム ラベルから display:block を削除し、'float:left;' を配置します。入力チェックボックスで。

class .label を使用していますか、それともエラーですか?

次の方法で更新できます。

  label .remember-me {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

 input[name=RememberMe] {
    margin-left: 0.5em;
   margin-top: 0.5em;
   padding: 0;
   float:left;
   clear:left;
 }

DOM で使用できる追加のセレクター ポイントとして、!important または親の #id を使用する必要がある場合があります。

于 2013-02-25T06:05:10.110 に答える