Переместить 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;
}

Что CSS можно добавить в рамку, чтобы она появилась в левой части ширины 200 пикселей? У меня немного сложнее с поплавками (в частности, с вертикальным выравниванием), но я слышал, что это правильная практика. chrome showing check box width

РЕДАКТИРОВАТЬ: ОК, поэтому многие люди предлагают не плавать входы справа. Если это так, я могу вообще не использовать float и просто установить ширину метки и иметь
после каждой строки. Будет ли это приемлемой практикой или я просто скучаю поплавки здесь?

Ответы

Ответ 1

попробуйте это, здесь демо ссылка

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

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

}

.clear {
    clear: both;
}

Ответ 2

Я думаю, что проблема, связанная с тем, что ваш флажок должен быть таким, потому что вы устанавливаете вход width:200px, поэтому вам нужно добавить 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;
}

Надеюсь, что эта помощь:)

Ответ 3

Не перемещайте его слева от его ширины - пусть он диктует свою собственную ширину, а затем добавляет дополнение с правой стороны, если вам это нужно. Но, судя по вашему дизайну, вы этого не делаете.

input[type=checkbox] { width: auto }

Ответ 4

Таблица подходит для этого, так как у вас есть (пользовательские) табличные данные. Это также решит проблемы с вертикальным выравниванием.

К сожалению, вы не можете установить флажок в левой части его ширины. Лично я бы рекомендовал избегать стилизации input без указания [type=something]. Однако, если вы используете множество типов ввода HTML5, таких как email, number, url и т.д., Тогда вам может быть полезно стилизовать все input в одну сторону, а затем использовать width:auto для [type=radio] и [type=checkbox]

Ответ 5

Если вы используете средство атрибута float, вы должны указать ширину контейнера формы.

Ответ 6

Вы должны удалить float: right; и width: 200px; в объявлении класса input. И я бы установил ширины для всех меток (т.е. 200px) для выравнивания второго столбца.

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

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

.clear {
    clear: both;
}

См. Пример jsFiddle.

Ответ 7

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

Чтобы сделать это, просто поместите его в div и дайте div этому стилю:

.checkDIV
{
    text-align:left;
}

Пример:

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

Ответ 8

Установите его ширину как 20px, что устраняет проблему. Это не должно быть 200px?