Как установить метку флажка слева?

Эта страница с регистрационной формой должна быть выровнена, как первая картинка. Если я не добавлю CSS, я могу получить метку слева от флажка (поместив тег метки под тегом ввода). Как только я начинаю добавлять CSS, он всегда возвращается влево. Я также попытался добавить классы в div, которые я разместил вокруг всех элементов ввода, но это сделало все еще хуже. Надеюсь, кто-то может пролить свет на эту проблему для меня?

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

Это то, что я получил до сих пор: Как установить метку флажка слева?

HTML:

<!DOCTYPE html>
<html lang = "nl">

<head>
    <meta charset = "UTF-8">
    <title>Pinkpop 2021 | 18 &#8211; 19 &#8211; 20 juni 2021</title>
    <link rel = "stylesheet" href = "global.css">
</head>

<body>
<div>

    <table>
        <tr>
            <td><img src = "../images/logo.png" alt=logo width = "400" style = "padding: 10px;"></td>
            <td style = "text-align: center; vertical-align: middle;">
                <div class = "niewsbrief">Nieuwsbrief</div>
            </td>
        </tr>
    </table>

    <h2>Schrijf je hier in voor onze nieuwsbrief</h2>

    <form>
        <div>
            <label for = "E-mail">E-mail:</label>
            <input type = "email" name = "E-mail:" id = "E-mail" required>
        </div>
        <div>
            <label for = "frequentie">Frequentie:</label>
            <select id = "frequentie" name = "frequentie">
                <option value = "Maandelijks">Maandelijks</option>
                <option value = "Kwartaal">Kwartaal</option>
                <option value = "Jaarlijks">Jaarlijks</option>
            </select>
        </div>
        <div>
            <input type = "checkbox" id = "checkbox" name = "Privacy">
            <label id = "checkboxes" for = "checkbox">Ik accepteer de privacy voorwaarden voor de registratie van mijn e-mailadres</label>
        </div>
        <div>
            <input type = "submit" value = "Registreer" >
        </div>
    </form>
    <hr>
    <span>Aan informatie op deze site kunnen geen rechten worden ontleend.</span><br>
    <span> &copy; Buro Pinkpop, Geleen</span>
</div>
    <script src = "tickets.js"></script>
</body>
</html>

CSS:

.niewsbrief {
    color: #ec008c;
    font-size: 300%;
    font-weight: bolder;
}

form {
    color: #ffd205;
    font-size: 120%;
}

label {
    float:left;
    width: 100px;
    text-align: left;
    padding-right: 5px;
    margin-top: 12px;
    clear: left;
}

input {
    margin-top: 15px;
}

Отвечает ли это на ваш вопрос? Перемещение флажка вправо от метки

— 16.03.2022 09:42

html css

16.03.2022 09:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Оберните свой ярлык вокруг ввода, и тогда он будет работать без дополнительного css.

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

Дополнительная информация: Все о плавающих элементах CSS-трюки

<div class = "control">
  <label>
    <input type = "checkbox">
    Hello World
  </label>
</div>

16.03.2022 09:42

Ответ принят как подходящий

одно предложение:

избегать всплывающих окон на этикетке
придайте одинаковый размер всем вашим ярлыкам (display: inline-block и width)
переопределить свойство отображения метки флажка, чтобы оно размещалось после флажка

.niewsbrief {
  color: #ec008c;
  font-size: 300%;
  font-weight: bolder;
}

form {
  color: #ffd205;
  font-size: 120%;
}

input {
  margin-top: 15px;
}

label {
  width: 20%;
  display: inline-block;
}

.alinea-left, #register {
  margin-left: 20%;
}

.alinea-left label {
  display: initial;
}

<!DOCTYPE html>
<html lang = "nl">

<head>
  <meta charset = "UTF-8">
  <title>Pinkpop 2021 | 18 &#8211; 19 &#8211; 20 juni 2021</title>
  <link rel = "stylesheet" href = "global.css">
</head>

<body>
  <div>

    <table>
      <tr>
        <td><img src = "../images/logo.png" alt=logo width = "400" style = "padding: 10px;"></td>
        <td style = "text-align: center; vertical-align: middle;">
          <div class = "niewsbrief">Nieuwsbrief</div>
        </td>
      </tr>
    </table>

    <h2>Schrijf je hier in voor onze nieuwsbrief</h2>

    <form>
      <div>
        <label for = "E-mail">E-mail:</label>
        <input type = "email" name = "E-mail:" id = "E-mail" required>
      </div>
      <div>
        <label for = "frequentie">Frequentie:</label>
        <select id = "frequentie" name = "frequentie">
          <option value = "Maandelijks">Maandelijks</option>
          <option value = "Kwartaal">Kwartaal</option>
          <option value = "Jaarlijks">Jaarlijks</option>
        </select>
      </div>
      <div class = "alinea-left">
        <input type = "checkbox" id = "checkbox" name = "Privacy">
        <label id = "checkboxes" for = "checkbox">Ik accepteer de privacy voorwaarden voor de registratie van mijn e-mailadres</label>
      </div>
      <div>
        <input id = "register" type = "submit" value = "Registreer">
      </div>
    </form>
    <hr>
    <span>Aan informatie op deze site kunnen geen rechten worden ontleend.</span><br>
    <span> &copy; Buro Pinkpop, Geleen</span>
  </div>
  <script src = "tickets.js"></script>
</body>

</html>

16.03.2022 09:59

изменить этот ярлык ( <label id = "checkboxes" for = "checkbox">Ik accepteer de privacy voorwaarden voor de registratie van mijn e-mailadres</label>)

быть промежутком ( <span id = "checkboxes" for = "checkbox">Ik accepteer de privacy voorwaarden voor de registratie van mijn e-mailadres</span>)

16.03.2022 10:07