試圖讓我的單選按鈕對齊

Question

好的，所以我正在做一個調查的 freecodecamp 項目。 那個代碼筆

他們希望你的調查像這樣運作

https://codepen.io/freeCodeCamp/pen/VPaoNP 。 我目前正在尋找

像https://codepen.io/anon/pen/qvQLZx 。

我的 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%;
}

我現在的問題是我想要

我的單選按鈕就像在他們的代碼筆中一樣排列。 也不會

如果我能弄清楚如何排列像他們一樣的其他問題，那就太糟糕了。 他們

將文本放在左側，然后將按鈕/框放在右側，並帶有

在中間分開，但我不知道如何做到這一點。

到目前為止，我已經嘗試過垂直對齊它們並顯示阻塞和

內聯阻止他們。

Answer 1

這樣做您的輸入將在下面示例中的一列檢查中。

<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>

首先添加一個類名為“inputs”的 div 並將您的輸入包裝在其中。 並添加這個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; 
}

然后在您的代碼中查看它。

Answer 2

按照他們的例子，對於每一行，他們將左右兩邊的內容都包裝在他們設置為inline-block div 元素中。 像這樣：

 .left, .right { display: inline-block; width: 45%; } .left { text-align: right; } .right { text-align: left; } input { margin: 5px; }

 <div class="left"> <label id="name-label" for="name">Name:</label> </div> <div class="right"> <input type="name" id="name" required placeholder="Name" /> </div> <div class="left"> <label id="email-label" for="email">Email:</label> </div> <div class="right"> <input type="email" id="email" required placeholder="Email" /> </div>