radio отображается неправильно

Question

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: url('img/background.jpg');
  background-color: aquamarine;
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: 'Poppins', sans-serif;
}

#main,
#header {
  padding: 35px 0;
  padding-bottom: 0;
  background-color: rgba(138, 43, 226, .8);
  color: #fff;
  display: flex;
  flex-direction: column;
}

#title {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

#description {
  margin: 15px 0;
  font-weight: 100;
  font-style: italic;
  text-align: center;
}
  
form {
  padding: 30px;
  margin-bottom: 0;
  width: 50%;
  background-color: rgba(92, 2, 175, 0.9);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 0px solid #fff;
  border-radius: 5px;
  align-self: center;
}

input,
select,
option {
  margin-top: 5px;
  margin-bottom: 20px;
  padding-left: 10px;
  width: 100%;
  height: 35px;
  border: 1px solid aquamarine;
  border-radius: 3px;
  font-size: 15px;
  color: #757579;
}

label {
  font-size: 15px;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Survey form</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
</head>

<body>
  <div id="main">
    <h1 id='title'>freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    <form id="form">
      <label for="name-label">Name<br>
                <input id="name" id="name-label" type="text" 
                placeholder="Enter your name here" required>
            </label>
      <label for="email-label">Email
                <input id="email" id="email-label" type="email" 
                placeholder="Enter your email here" required>
            </label>
      <label for="number-label">Age(optional)
                <input id="number" id="number-label" type="Number" 
                placeholder="Enter your age here" min="0" max="120">
            </label>
      <label for="dropdown">Which option best describes 
                your current role?
                <select id="dropdown" name="role">
                    <option disabled selected value>Enter your role</option>
                    <option value="student">Student</option>
                    <option value="full-time-job">Full Time Job</option>
                    <option value="full-time-learner">Full Time Learner</option>
                    <option value="prefer-not-to-say">Prefer Not To Say</option>
                    <option value="other">Other</option>
                </select>
            </label>
      <!-- МЕСТО ПРОБЛЕМЫ -->
      <div class="form-item">
        <label for="recomend">Would you recommend freeCodeCamp to a friend?
               <input id="recomend" type="radio" name="recomend"
                value="definetly">Definetly 
                <input id="recomend" type="radio" name="recomend"
                value="definetly">Definetly  
                <input id="recomend" type="radio" name="recomend"
                value="definetly">Definetly   
            </label>
      </div>
    </form>
  </div>
</body>

</html>

Answer 1

В контейнере div#main, кроме заголовка, описания и формы, ничего нет. Input-ы же находятся в <form>, да ещё и в своих контейнерах. Вот относительно этих контейнеров и надо выравнивать.
Определитесь - radio или checkbox ? Это не одно и то же.
ID должны быть уникальными, поэтому не стоит слепо дублировать строки кода. Для radio, общим (одинаковым) может являться атрибут name.
<label for="recomend"> - один label на три input-а?
Любые текстовые узлы всегда следует оборачивать в <p> или <span> - так проще их стилизовать, не затрагивая соседние элементы.
input, select, option { ... } - задавать общее правило для совершенно разных элементов - плохая практика.

Немного поправил код:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: url('img/background.jpg');
  background-color: aquamarine;
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: 'Poppins', sans-serif;
}

#main,
#header {
  padding: 35px 0;
  padding-bottom: 0;
  background-color: rgba(138, 43, 226, .8);
  color: #fff;
  display: flex;
  flex-direction: column;
}

#title {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

#description {
  margin: 15px 0;
  font-weight: 100;
  font-style: italic;
  text-align: center;
}

form {
  padding: 30px;
  margin-bottom: 0;
  width: 50%;
  background-color: rgba(92, 2, 175, 0.9);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 0px solid #fff;
  border-radius: 5px;
  align-self: center;
}

input,
select,
option {
  margin-top: 5px;
  margin-bottom: 20px;
  padding-left: 10px;
  width: 100%;
  height: 35px;
  border: 1px solid aquamarine;
  border-radius: 3px;
  font-size: 15px;
  color: #757579;
}

label {
  font-size: 15px;
}

.form-item label {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.form-item span {
  margin-top: 5px;
  margin-bottom: 20px;
  padding-left: 10px;
  width: 100%;
  line-height: 35px;
}

.form-item input {
  width: 35px;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Survey form</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
</head>

<body>
  <div id="main">
    <h1 id='title'>freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    <form id="form">
      <label for="name-label">Name<br>
        <input id="name" id="name-label" type="text" placeholder="Enter your name here" required>
      </label>
      <label for="email-label">Email
        <input id="email" id="email-label" type="email" placeholder="Enter your email here" required>
      </label>
      <label for="number-label">Age(optional)
        <input id="number" id="number-label" type="Number" placeholder="Enter your age here" min="0" max="120">
      </label>
      <label for="dropdown">Which option best describes your current role?
        <select id="dropdown" name="role">
          <option disabled selected value>Enter your role</option>
          <option value="student">Student</option>
          <option value="full-time-job">Full Time Job</option>
          <option value="full-time-learner">Full Time Learner</option>
          <option value="prefer-not-to-say">Prefer Not To Say</option>
          <option value="other">Other</option>
        </select>
      </label>
      <!-- МЕСТО ПРОБЛЕМЫ -->
      <div class="form-item">
        Would you recommend freeCodeCamp to a friend?
        <label><input type="radio" name="recomend" value="definetly"><span>Definetly</span></label>
        <label><input type="radio" name="recomend" value="definetly"><span>Definetly</span></label>
        <label><input type="radio" name="recomend" value="definetly"><span>Definetly</span></label>
      </div>
    </form>
  </div>
</body>

</html>

Answer 2

you can do otherwise, you set all input elements to: width: 100%, that's your problem. Add the same class to all radio buttons and checkboxes, then specify this class in the css rule and reset the old values. Here is an example .inline { width: unset; margin: 0 0.5em 0 0; vertical-align: middle; }

БЛОГ НА HUSL

radio отображается неправильно

Ответы (2 шт):