Javascript 试着让我的单选按钮对齐

好的，我正在做一个调查的freecodecamp项目。密码笔

他们希望你的调查像这样运作

。我现在有我的

喜欢

我的css

#title {
  text-align:center;
}
#description {
  text-align:center
}

#survey-form {
  text-align:center;
}
.leftsidequestions {
  display:inline-block
  margin:auto;
  text-align:right;
}
#number {
  width:9%;
}

我现在的问题是我想

我的单选按钮排成一排，就像他们在密码笔里一样。也不会是这样

如果我能想出如何把我的其他问题和他们的一样排成一行，那就糟糕了。他们

将文本置于左侧，然后将按钮/框置于右侧，并带有

在中间分，但我不知道该怎么做。

到目前为止，我已经尝试垂直对齐它们，并显示阻塞和

---

inlineblocking它们。

这样做，您的输入将在下面的示例中的一列中进行检查

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="main">
<h1 id="title">Survey Form</h1>
<p id="description">Favourite Wu-Tang Things</p>

  <div class="leftsidequestions">
      <form id="survey-form">
       <label id="name-label" for="name">Name:</label>
      <input type="name" id="name" required placeholder="Name"><br>
      <br>
        <label id="email-label" for="email">Email:</label> 
        <input type="email" id="email" required  placeholder="Email"><br>
      <br>
        <label id="number-label" for="age">&ensp; Age: </label>
        <input type="number" id="number" min="1" max="100"  placeholder="Age"><br><br>
        Favourite Wu-Tang Album: 
        <select id="dropdown">
        <option value="1">Enter the Wu-Tang (36 Chambers)</option>
        <option value="2">Wu-Tang Forever</option>
        <option value="3">The W</option>
        <option value="4">Iron Flag</option>
        <option value="5">8 Diagrams</option>
        <option value="6">A Better Tomorrow</option>
        <option value="7">Once Upon a Time in Shaolin</option>
        </select><br><br>
        Favourite Member<br>
        <div class="inputs"><input type="radio" name="member" value"rza">Rza
        <br><input type="radio" name="member" value"gza">Gza
        <br><input type="radio" name="member" value"odb">Ol Dirty Bastard
        <br><input type="radio" name="member" value"Methodman">Method-Man<br>
        <input type="radio" name="member" value"Raekwon">Raekwon
        <br><input type="radio" name="member" value"U-God">U-God
        <br><input type="radio" name="member" value"Masta">Masta Killa
        <br><input type="radio" name="member" value"Ghostface">Ghostface Killah
        </div>
  </div>
</form>
</div>

---

然后在代码中看到它

按照他们的示例，对于每行，他们在设置为

内联块

的div元素的左右两侧包装内容。像这样：

。左，
.对{
显示：内联块；
宽度：45%；
}
.左{
文本对齐：右对齐；
}
.对{
文本对齐：左对齐；
}
输入{
保证金：5px；
}

姓名：
电邮：

google block vs InLine看起来他们的笔中有css代码

body

#title {
  text-align:center;
}
#description {
  text-align:center
}

#survey-form {
  text-align:center;
}
.leftsidequestions {
  display:inline-block
  margin:auto;
  text-align:right;
}
#number {
  width:9%;
}

.inputs {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin: auto; 
}