FreeCodeCamp: Адаптивный веб-дизайн — сертификация по форме опроса

Я пытаюсь научиться программировать в качестве хобби, предваряя все это. HTML и CSS показались мне интересным началом, потому что создание веб-сайтов показалось мне интригующим.

Я прохожу сертификацию формы опроса по учебной программе по адаптивному веб-дизайну, и мне не удается выровнять флажки по левой стороне формы так, как я хочу. в частности, я хочу, чтобы у каждого флажка была своя собственная строка, выровненная по левой стороне формы, а не перечисленная одна за другой в текущем формате. Я искал в Интернете средства правовой защиты и перепробовал многие. Однако я не очень хорошо разбираюсь в этой области, поэтому буду благодарен за любую помощь. Я приведу свой код ниже.

h1,p {
  margin: 5px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

body {
  color: white;
  background-color: rgb(51, 0, 0);
  font-family: 'Poppins', sans-serif;
}

form {
  background-color: rgb(32,0,0);
  width: 80vw;
  margin: 0 auto;
}

label {
  display: block;
}

input  {
  background-color: rgb(160, 160, 160);
}
  
.input-checkbox {
  display: inline-block;
  margin-right: 0.625rem;
  min-height: 1 rem;
  min-width: 1 rem;
}

input[type = "submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: rgb(160, 160, 160);
  border-color: white;
  min-width: 300px;
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8">
    <title>Survey Form</title>
    <link rel = "stylesheet" href = "styles.css">
  </head>
<h1 id = "title">freeCodeCamp Survey Form
</h1>
  <p id = "description">Please answer below to help us improve our platform.</p>
  <hr>
  <body>
    <form id = "survey-form">
      <label for = "name">First and Last Name</label>
        <input id = "name" type = "text" name = "name" placeholder = "Enter your Name" required></input>
      <label for = "email">Email Address</label>
        <input id = "email" type = "email" name = "email" placeholder = "Enter your Email" required></input>
      <label for = "age">Age (optional)</label>
        <input id id = "number" type = "number" min = "13" max = "120" name = "age" placeholder = "##"></input>
      <label for = "referrer">How did you hear about us?</label>
        <select id = "referrer" name = "referrer">
          <option value = "">(select one)</option>
          <option value = "1">Youtube</option>
          <option value = "2">TikTok</option>
          <option value = "3">Online Forum</option>
          <option value = "4">Other</option>
        </select>
      <legend>Select Your Gender:</legend>
        <label for = "gender">
          <input id = "Male" type = "radio" name = "gender" class = "input-checkbox" checked></input>Male</label>
        <label for = "gender">
          <input id = "Female" type = "radio" name = "gender" class = "input-checkbox"></input>Female</label>
        <label for = "gender">
          <input id = "Other" type = "radio" name = "gender" class = "input-checkbox" ></input>Prefer not to disclose</label>
      <legend>What Core Curriculum have you explored on our platform, so far?</legend>
        <label for = "projects">
          <input id = "web-dev" type = "checkbox" name = "projects" value = "web-dev" class = "input-checkbox">Responsive Web Design</input>
          <input id = "javascript" type = "checkbox" name = "projects" value = "javascript" class = "input-checkbox">Javascript Algorithms and Data Structures</label></input>
          <input id = "front-end" type = "checkbox" name = "projects" value = "front-end" class = "input-checkbox">Front End Development</input>
          <input id = "data-vis" type = "checkbox" name = "projects" value = "data-vis" class = "input-checkbox">Data Visualization</input>
          <input id = "rel-data" type = "checkbox" name = "projects" value = "rel-data" class = "input-checkbox">Relational Databases</input>
          <input id = "back-dev" type = "checkbox" name = "projects" value = "back-dev" class = "input-checkbox">Back End Development</input>
          <input id = "q-a" type = "checkbox" name = "projects" value = "q-a" class = "input-checkbox">Quality Assurance</input>
          <input id = "python" type = "checkbox" name = "projects" value = "python" class = "input-checkbox">Scientific Computing with Python</input>
          <input id = "data-an" type = "checkbox" name = "projects" value = "data-an" class = "input-checkbox">Data Analysis with Python</input>
          <input id = "info-sec" type = "checkbox" name = "projects" value = "info-sec" class = "input-checkbox">Information Security</input>
          <input id = "machine-learning" type = "checkbox" name = "projects" value = "machine-learning" class = "input-checkbox">Machine Learning with Python</input>
          <input id = "algebra" type = "checkbox" name = "projects" value = "algebra" class = "input-checkbox">College Algebra with Python</input>
        </label>
      <legend>Provide a Bio:</legend>
        <textarea id = "bio" rows = "3" cols = "40" placeholder = "I enjoy coding on the weekends..."></textarea>
      <input type = "submit" value = "Submit"></input>
    </form>
  </body>
</html>

```

Я пробовал много разных форматов CSS, чтобы исправить это, но пока не нашел решения. Между тем, как я в последний раз работал над этим, я взял отпуск за границей, поэтому у меня немного неясность во всех способах, которыми я воспользовался, чтобы попытаться решить эту проблему.

Может быть полезно сначала пропустить ваш код через валидатор, например validator.w3.org/nu Например, у вас есть ложные замыкания ввода.

— 15.07.2024 07:09

Ваша разметка совершенно недействительна. <input> — это так называемый replaced element и не имеет закрывающего тега. Кроме того, метка может содержать только 1 входной элемент. На самом деле, это не подходящий чехол для этикетки. Это должен быть подзаголовок или <legend> внутри <fieldset>. описание, которое вы помещаете «внутри» входных данных, является меткой. Я бы начал с исправления вашей недействительной разметки и проверил ее с помощью Валидатора разметки. Неправильная разметка вызывает множество непредсказуемых проблем с макетом, поскольку браузер пытается исправить ваши ошибки.

— 15.07.2024 07:09

PS: Пока вы используете legend, вы упустили из виду, что legend действителен только как прямой дочерний элемент fieldset, и в каждом legend разрешен только один fieldset. Кроме того, между head и body нельзя использовать теги.

— 15.07.2024 07:12

html css

15.07.2024 07:05

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 2

Один из способов решить эту проблему — просто добавить тег br. Тег br вставляет одиночный разрыв строки. Поэтому я просто добавил тег br после каждой метки, чтобы вставить один разрыв строки, а также добавил br в некоторых местах, чтобы оставить между ними некоторое пространство. Также я не вносил никаких изменений в ваш CSS. вот код, надеюсь, это поможет:

h1,p {
    margin: 5px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
  }
  
  body {
    color: white;
    background-color: rgb(51, 0, 0);
    font-family: 'Poppins', sans-serif;
  }
  
  form {
    background-color: rgb(32,0,0);
    width: 80vw;
    margin: 0 auto;
  }
  
  label {
    display: block;
  }
  
  input  {
    background-color: rgb(160, 160, 160);
  }
    
  .input-checkbox {
    display: inline-block;
    margin-right: 0.625rem;
    min-height: 1 rem;
    min-width: 1 rem;
  }
  
  input[type = "submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: rgb(160, 160, 160);
    border-color: white;
    min-width: 300px;
  }

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8">
    <title>Survey Form</title>
    <link rel = "stylesheet" href = "styles.css">
  </head>
<h1 id = "title">freeCodeCamp Survey Form
</h1>
  <p id = "description">Please answer below to help us improve our platform.</p>
  <hr>
  <body>
    <form id = "survey-form">
      <label for = "name">First and Last Name</label>
        <input id = "name" type = "text" name = "name" placeholder = "Enter your Name" required></input>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <label for = "email">Email Address</label>
        <input id = "email" type = "email" name = "email" placeholder = "Enter your Email" required></input>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <label for = "age">Age (optional)</label>
        <input id id = "number" type = "number" min = "13" max = "120" name = "age" placeholder = "##"></input>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <label for = "referrer">How did you hear about us?</label>
        <select id = "referrer" name = "referrer">
          <option value = "">(select one)</option>
          <option value = "1">Youtube</option>
          <option value = "2">TikTok</option>
          <option value = "3">Online Forum</option>
          <option value = "4">Other</option>
        </select>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <legend>Select Your Gender:</legend>
        <label for = "gender">
          <input id = "Male" type = "radio" name = "gender" class = "input-checkbox" checked></input>Male</label>
        <label for = "gender">
          <input id = "Female" type = "radio" name = "gender" class = "input-checkbox"></input>Female</label>
        <label for = "gender">
          <input id = "Other" type = "radio" name = "gender" class = "input-checkbox" ></input>Prefer not to disclose</label>
          <br> <!-- Added this line so the next labels can be on the second line  -->
          <br> <!--Added another br so I can make some space between this label and other label-->
      <legend>What Core Curriculum have you explored on our platform, so far?</legend>
      <br> <!-- Added this line so the next labels can be on the second line  -->
        <label for = "projects">
            <input id = "web-dev" type = "checkbox" name = "projects" value = "web-dev" class = "input-checkbox">
            <label for = "web-dev">Responsive Web Design</label>
            <br>
            
            <input id = "javascript" type = "checkbox" name = "projects" value = "javascript" class = "input-checkbox">
            <label for = "javascript">Javascript Algorithms and Data Structures</label>
            <br>
            
            <input id = "front-end" type = "checkbox" name = "projects" value = "front-end" class = "input-checkbox">
            <label for = "front-end">Front End Development</label>
            <br>
            
            <input id = "data-vis" type = "checkbox" name = "projects" value = "data-vis" class = "input-checkbox">
            <label for = "data-vis">Data Visualization</label>
            <br>
            
            <input id = "rel-data" type = "checkbox" name = "projects" value = "rel-data" class = "input-checkbox">
            <label for = "rel-data">Relational Databases</label>
            <br>
            
            <input id = "back-dev" type = "checkbox" name = "projects" value = "back-dev" class = "input-checkbox">
            <label for = "back-dev">Back End Development</label>
            <br>
            
            <input id = "q-a" type = "checkbox" name = "projects" value = "q-a" class = "input-checkbox">
            <label for = "q-a">Quality Assurance</label>
            <br>
            
            <input id = "python" type = "checkbox" name = "projects" value = "python" class = "input-checkbox">
            <label for = "python">Scientific Computing with Python</label>
            <br>
            
            <input id = "data-an" type = "checkbox" name = "projects" value = "data-an" class = "input-checkbox">
            <label for = "data-an">Data Analysis with Python</label>
            <br>
            
            <input id = "info-sec" type = "checkbox" name = "projects" value = "info-sec" class = "input-checkbox">
            <label for = "info-sec">Information Security</label>
            <br>
            
            <input id = "machine-learning" type = "checkbox" name = "projects" value = "machine-learning" class = "input-checkbox">
            <label for = "machine-learning">Machine Learning with Python</label>
            <br>
            
            <input id = "algebra" type = "checkbox" name = "projects" value = "algebra" class = "input-checkbox">
            <label for = "algebra">College Algebra with Python</label>
            <br>
            
        </label>
        <br> <!-- Added this line so the next labels can be on the second line  -->
        <br> <!--Added another br so I can make some space between this label and other label-->
      <legend>Provide a Bio:</legend>
      <br> 
        <textarea id = "bio" rows = "3" cols = "40" placeholder = "I enjoy coding on the weekends..."></textarea>
        <br>
      <input type = "submit" value = "Submit"></input>
    </form>
  </body>
</html>

Разметка по-прежнему недействительна. <br>´ are line breaks not for creating spacings. <br><br>` — ужасная рекомендация, так как в этом случае вам следует использовать запас. Он хочет получить сертификат по адаптивному веб-дизайну. Не стоит рекомендовать некачественные решения. Особенно для адаптивного веб-дизайна вам нужно действительно изучить CSS, а не пытаться решать проблемы исключительно с помощью HTML.

— 15.07.2024 08:31

15.07.2024 07:36

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

Чтобы правильно выровнять флажки, установите для контейнера div .checkbox-group отображение: flex и flex-direction: столбец. Для интервала добавьте row-gap: 10px или любое другое по вашему выбору и align-items: flex-start для выравнивания по левой стороне.

h1, p {
  margin: 5px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

body {
  color: white;
  background-color: rgb(51, 0, 0);
  font-family: 'Poppins', sans-serif;
}

form {
  background-color: rgb(32, 0, 0);
  width: 80vw;
  margin: 0 auto;
}

input {
  background-color: rgb(160, 160, 160);
}

.input-checkbox {
  display: inline-block;
  margin-right: 0.625rem;
  min-height: 1rem;
  min-width: 1rem;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  align-items: flex-start;
}

input[type = "submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: rgb(160, 160, 160);
  border-color: white;
  min-width: 300px;
}

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Survey Form</title>
  <link rel = "stylesheet" href = "styles.css">
</head>
<body>
  <h1 id = "title">freeCodeCamp Survey Form</h1>
  <p id = "description">Please answer below to help us improve our platform.</p>
  <hr>
  <form id = "survey-form">
    <label for = "name">First and Last Name</label>
    <input id = "name" type = "text" name = "name" placeholder = "Enter your Name" required></input>
    
    <label for = "email">Email Address</label>
    <input id = "email" type = "email" name = "email" placeholder = "Enter your Email" required></input>
    
    <label for = "age">Age (optional)</label>
    <input id = "number" type = "number" min = "13" max = "120" name = "age" placeholder = "##"></input>
    
    <label for = "referrer">How did you hear about us?</label>
    <select id = "referrer" name = "referrer">
      <option value = "">(select one)</option>
      <option value = "1">Youtube</option>
      <option value = "2">TikTok</option>
      <option value = "3">Online Forum</option>
      <option value = "4">Other</option>
    </select>
    
    <legend>Select Your Gender:</legend>
    <label for = "gender">
      <input id = "Male" type = "radio" name = "gender" class = "input-checkbox" checked>Male</input>
    </label>
    <label for = "gender">
      <input id = "Female" type = "radio" name = "gender" class = "input-checkbox">Female</input>
    </label>
    <label for = "gender">
      <input id = "Other" type = "radio" name = "gender" class = "input-checkbox">Prefer not to disclose</input>
    </label>
    
    <legend>What Core Curriculum have you explored on our platform, so far?</legend>
    <div class = "checkbox-group">
      <label for = "web-dev">
        <input id = "web-dev" type = "checkbox" name = "projects" value = "web-dev" class = "input-checkbox">Responsive Web Design</input>
      </label>
      <label for = "javascript">
        <input id = "javascript" type = "checkbox" name = "projects" value = "javascript" class = "input-checkbox">Javascript Algorithms and Data Structures</input>
      </label>
      <label for = "front-end">
        <input id = "front-end" type = "checkbox" name = "projects" value = "front-end" class = "input-checkbox">Front End Development</input>
      </label>
      <label for = "data-vis">
        <input id = "data-vis" type = "checkbox" name = "projects" value = "data-vis" class = "input-checkbox">Data Visualization</input>
      </label>
      <label for = "rel-data">
        <input id = "rel-data" type = "checkbox" name = "projects" value = "rel-data" class = "input-checkbox">Relational Databases</input>
      </label>
      <label for = "back-dev">
        <input id = "back-dev" type = "checkbox" name = "projects" value = "back-dev" class = "input-checkbox">Back End Development</input>
      </label>
      <label for = "q-a">
        <input id = "q-a" type = "checkbox" name = "projects" value = "q-a" class = "input-checkbox">Quality Assurance</input>
      </label>
      <label for = "python">
        <input id = "python" type = "checkbox" name = "projects" value = "python" class = "input-checkbox">Scientific Computing with Python</input>
      </label>
      <label for = "data-an">
        <input id = "data-an" type = "checkbox" name = "projects" value = "data-an" class = "input-checkbox">Data Analysis with Python</input>
      </label>
      <label for = "info-sec">
        <input id = "info-sec" type = "checkbox" name = "projects" value = "info-sec" class = "input-checkbox">Information Security</input>
      </label>
      <label for = "machine-learning">
        <input id = "machine-learning" type = "checkbox" name = "projects" value = "machine-learning" class = "input-checkbox">Machine Learning with Python</input>
      </label>
      <label for = "algebra">
        <input id = "algebra" type = "checkbox" name = "projects" value = "algebra" class = "input-checkbox">College Algebra with Python</input>
      </label>
    </div>
    
    <legend>Provide a Bio:</legend>
    <textarea id = "bio" rows = "3" cols = "40" placeholder = "I enjoy coding on the weekends..."></textarea>
    
    <input type = "submit" value = "Submit"></input>
  </form>
</body>
</html>

Большое спасибо! Теперь я осознаю свою ошибку, не используя класс div. На самом деле я использовал его в самом начале, чтобы сгруппировать и другие входные данные, и это значительно упростило их форматирование в CSS. Тесты были проведены, и код был одобрен после исправления нескольких орфографических и глупых ошибок. Ты лучший!

— 21.07.2024 01:21

15.07.2024 12:36