Как я могу установить флажок и метку на одной строке?

Question

У меня есть следующий 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; 
} 

Моя проблема заключается в том, что слова «Запомнить меня» на одной строке и появится флажок под ним ,

Как это сделать, чтобы флажок появлялся слева от слов «Запомнить меня». Должен ли я использовать float: left или , чтобы метка не отображалась как disply: block?

Update:

Спасибо за все предложения. Я не могу изменить мастер CSS для моего приложения. Является ли это possi BLE для меня, чтобы внести изменения в некоторые конкретные CSS, например:

label.remember-me { 

} 

input#RememberMe { 

} 

Answer 1

Дисплей недвижимости для этикетки должны быть inline-block. Вы можете больше узнать о вариантах отображения here.

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

Демо: Fiddle

Update:

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

Демо: Fiddle

Answer 2

вы использовали Display:Block в label CSS, что является проблемой.
удалите его, и он будет работать.

Флажок слева.

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

См fiddle

Answer 3

.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> 

Answer 4

Должно быть что-то вроде этого: он будет отображать 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> 

Answer 5

удалить дисплей: удалить из формы этикетку и поместить 'float: left;' на флажке ввода.

И вы используете класс .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; 
} 

Вы, возможно, придется использовать важные или родитель #id в качестве дополнительного селекторная точка, доступная в DOM.