Почему мои флажки и переключатели имеют странное расстояние?

Я только начинаю изучать HTML и CSS (через freeCodeCamp) и борюсь со своим первым сертификационным проектом: созданием формы опроса. Все шло хорошо до того момента, пока мне не понадобилось добавить флажки и переключатели. Между кликабельным полем/кнопкой и соответствующей меткой имеется огромное пространство, и я не могу центрировать весь этот контент по левому краю.

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

My pronouns are: [] she/her 
                 [] he/him
                 [] they/them

Choose one: () Yes
            () No
            () Maybe

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

My pronouns are:          []          she/her 
                 []          he/him
                 []          they/them

Choose one:           ()          Yes
            ()          No
            ()          Maybe

Мой код:

body {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100vh;
margin: 0;
font-family: Futura;
}

fieldset {
margin-top: 20px;
background-color: pink;
width: 70%;
border: 3px solid #ffffff;
border-radius: 5px;
}

legend {
background-color: grey;
color: #ffffff;
border: solid;
border-radius: 10px;
padding: 2px 5px;
}

input {
width: 50%;
background-color: #ffffff;
color: grey;
margin: 5px;
font-family: Futura;
} 

input[type=submit], input[type=reset] {
background-color: skyblue;
color: #000000;
width: 25%;
margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}

<fieldset>
  <legend>Checkbox area</legend>
  <div>
    My pronouns are:
    <input type = "checkbox" id = "option1" name = "option1" value = "she/her"><label for = "option1">she/her</label>
    <input type = "checkbox" id = "option2" name = "option2" value = "he/him"><label for = "option2">he/him</label>
    <input type = "checkbox" id = "option3" name = "option3" value = "they/them"><label for = "option3">they/them</label>
  </div>
  <div class = "radio">
    <label><input type = "radio" name = "yes-no-maybe" value = "yes" checked> Yes</label>
    <label><input type = "radio" name = "yes-no-maybe" value = "no"> No</label>
    <label><input type = "radio" name = "yes-no-maybe" value = "maybe"> Maybe</label>
  </div>
</fieldset>

Можете ли вы более четко объяснить странное расстояние? Что именно вы имеете в виду?

— 27.08.2024 13:19

html css forms checkbox

27.08.2024 13: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

Я не уверен, что именно вы подразумеваете под странным интервалом, но вот моя попытка.

<fieldset>
  <legend>Checkbox area</legend>
  <p>My pronouns are:</p>

  <div>
    <input type = "checkbox" id = "option1" name = "option1" value = "she/her"><label for = "option1">she/her</label>
    <input type = "checkbox" id = "option2" name = "option2" value = "he/him"><label for = "option2">he/him</label>
    <input type = "checkbox" id = "option3" name = "option3" value = "they/them"><label for = "option3">they/them</label>
  </div>
  <div class = "radio">
    <label><input type = "radio" name = "yes-no-maybe" value = "yes" checked> Yes</label>
    <label><input type = "radio" name = "yes-no-maybe" value = "no"> No</label>
    <label><input type = "radio" name = "yes-no-maybe" value = "maybe"> Maybe</label>
  </div>
</fieldset>

и CSS

body {
  background-color: #000000;
  color: #ffffff;
  width: 100%;
  height: 100vh;
  margin: 0;
  font-family: Futura;
}

fieldset {
  margin-top: 20px;
  background-color: pink;
  width: 70%;
  border: 3px solid #ffffff;
  border-radius: 5px;
}

legend {
  background-color: grey;
  color: #ffffff;
  border: solid;
  border-radius: 10px;
  padding: 2px 5px;
}

input {
  background-color: #ffffff;
  color: grey;
  margin: 5px;
  font-family: Futura;
}

input[type = "submit"],
input[type = "reset"] {
  background-color: skyblue;
  color: #000000;
  width: 25%;
  margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}

Демо

Кроме того, почему бы вам не использовать flexbox или сетку? Какого макета вы пытаетесь достичь?

Спасибо! Я добавил макет, которого пытаюсь достичь, в свой пост. Flexbox или Grid еще не были частью учебной программы, сейчас я нахожусь в самом начале этого курса. С нетерпением ждем возможности узнать больше

— 28.08.2024 10:35

Большой. Желаю вам всего наилучшего в учебе. Если вы довольны, можете ли вы принять ответ, который я опубликовал?

— 28.08.2024 10:36

27.08.2024 13:22

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

Просто добавьте родительский класс flex и оберните метку и ввод в общий div.

body {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100vh;
margin: 0;
font-family: Futura;
}

fieldset {
margin-top: 20px;
background-color: pink;
width: 70%;
border: 3px solid #ffffff;
border-radius: 5px;
}

legend {
background-color: grey;
color: #ffffff;
border: solid;
border-radius: 10px;
padding: 2px 5px;
}

input {
width: auto;
background-color: #ffffff;
color: grey;
margin: 5px;
font-family: Futura;
} 

input[type=submit], input[type=reset] {
background-color: skyblue;
color: #000000;
width: 25%;
margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}
.flex {
    display: flex;
    margin-bottom: 20px;
}

<fieldset>
  <legend>Checkbox area</legend>
  <div class = "flex">
    My pronouns are:
    <div class = "clust">
      <div class = "ch-wrap">
          <input type = "checkbox" id = "option1" name = "option1" value = "she/her"><label for = "option1">she/her</label>
      </div>
      <div class = "ch-wrap">
          <input type = "checkbox" id = "option2" name = "option2" value = "he/him"><label for = "option2">he/him</label>
      </div>
      <div class = "ch-wrap">
          <input type = "checkbox" id = "option3" name = "option3" value = "they/them"><label for = "option3">they/them</label>
      </div>
      </div>
  </div>
  <div class = "flex">
    Choose One
      <div class = "radio">
        <div class = "ch-wrap">
          <label><input type = "radio" name = "yes-no-maybe" value = "yes" checked> Yes</label>
        </div>
        <div class = "ch-wrap">
          <label><input type = "radio" name = "yes-no-maybe" value = "no"> No</label>
        </div>
        <div class = "ch-wrap">
          <label><input type = "radio" name = "yes-no-maybe" value = "maybe"> Maybe</label>
        </div>
      </div>
   </div>
</fieldset>

@Чарли Рад помочь...

— 27.08.2024 14:04

27.08.2024 13:22