0

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
    <style>
        .important {
            color: red;
        }

        p {
            clear: both;
            text-align: right;
            line-height: 25px;
        }

        label {
            float: left;
            padding-right: 10px;
        }

        form {
            float: left;
        }
    </style>
</head>
<body>
    <h1>Регистрация</h1>
    <form action="http://hillel.zilberstein.s-host.net/register.php" method="POST">
        <fieldset>
            <legend>Анкета</legend>
            <p>
                <label for="form-login">Логин<span class="important">*</span></label>
                <input type="text" name="login" placeholder="Введите логин" id="form-login" required>
            </p>

            <p>
                <label for="form-password">Пароль<span class="important">*</span></label>
                <input type="password" name="password" placeholder="Введите пароль" id="form-password" required>
            </p>

            <p>
                <label for="form-password2">Подтверждение пароля<span class="important">*</span></label>
                <input type="password" name="password2" placeholder="Подтвердите пароль" id="form-password2" required>
            </p>

            <p>
                <label for="form-surname">Фамилия<span class="important">*</span></label>
                <input type="text" name="surname" placeholder="Введите фамилию" id="form-surname" required>
            </p>

            <p>
                <label for="form-name">Имя<span class="important">*</span></label>
                <input type="text" name="name" placeholder="Введите имя" id="form-name" required>
            </p>

            <p>
                  <label>Пол<span class="important">*</span></label>
                  <label>
                      <input type="radio" name="male" value="man" required>Мужской
                  </label>
                  <label>
                      <input type="radio" name="male" value="female" required>Женский
                  </label>
              </p>

              <p>
                <label for="form-birthday">Дата рождения<span class="important">*</span></label>
                <input type="date" name="birthday" id="form-birthday" required>
            </p>

            <p>
                <label for="form-email">Почтовый адрес<span class="important">*</span></label>
                <input type="email" name="mail" placeholder="[email protected]" id="form-email" required>
            </p>

            <p>
                <label for="form-country">Страна<span class="important">*</span></label>
                <input type="text" name="country" placeholder="Введите страну" id="form-country" required>
            </p>

            <p>
                <label for="form-city">Город<span class="important">*</span></label>
                <input type="text" name="city" placeholder="Введите город" id="form-city" required>
            </p>

            <p>
                <label for="form-work">Опыт работы, лет<span class="important">*</span></label>
                <input type="number" name="work" placeholder="1-50 лет" id="form-work" required>
            </p>

            <p>
                <label for="form-site">Сайт</label>
                <input type="text" name="site" placeholder="Ссылка на ваш сайт" id="form-site">
            </p>

            <p>
                <label for="form-phone">Номер телефона</label>
                <input type="tel" name="phone" placeholder="Введите номер телефона" id="form-phone">
            </p>

            <p>
                <label for="form-info">О себе</label>
                <textarea name="info" rows="8" cols="30" placeholder="Расскажите что-нибудь о себе" id="form-info"></textarea>
            </p>

            <p>
                <label for="form-language">Родной язык</label>
                <select id="form-language" name="language">
                    <option value="rus">Русский</option>
                    <option value="ukr">Українська</option>
                    <option value="blg">Български</option>
                    <option value="en">English</option>
                </select>
            </p>

            <p>
                <label>
                    <input type="checkbox" name="agree" checked value="yes" required>Я разрешаю передать мои личные данные преподавателю<span class="important">*</span>
                </label>
            </p>

            <p>
                <input type="submit" name="but" value="Отправить">
            </p>
        </fieldset>
    </form>


</body>
</html>

Если в селекторе form убрать свойство "float: left", то форма расширится на весь экран. Почему свойство в данном селекторе сжимает форму?

1 ответ 1

1

float выбивает элемент из потока. Будучи в потоке и блочным элементом, форма по умолчанию растягивается на ширину родителя, в данном случае body. Форма, выбитая из потока, уже не может расшириться на ширину родителя. Так же, как например это не делают элементы при position: absolute. Прочтите про поток для ясности, это одно из фундаментальных понятий в вёрстке.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.