您如何使标签文本显示在无线电输入上方？答案

【问题标题】：How do you make label text show above radio inputs?您如何使标签文本显示在无线电输入上方？
【发布时间】：2022-07-01 23:46:01
【问题描述】：

由于某种原因，当我尝试在我的收音机输入上方执行 label> How Many Times do you Per Week?<label 时，标签中的文本没有显示。当我在任何其他地方尝试它时，例如在无线电输入的末端，它就可以工作。它只是在无线电输入之前不起作用。

.bcontainer {
  height: 800px;
  width: 550px;
  background-color: rgba(245, 245, 220, .95);
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  margin-bottom: 15px;
  margin-top: 15px;
  border: 2.5px solid black;
}

label {
  display: block;
  margin: 15px;
  color: black;
  font-family: verdana;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

input {
  width: 100%;
  margin-top: 10px;
  color: white;
  background-color: black;
  border: 1px solid black;
  min-height: 2em;
}


}
.align {
  vertical-align: middle;
  width: unset;
  margin: 0 10px 0 0;
}

<div class="hcontainer">
  <h1 id="title">Game Type Survey</h1>
  <p id="description"><em>Thank you for your response!</em></p>
</div>
<div class="bcontainer">
  <form id="survey-form" action="https://register-demo.freecodecamp.org">
    <fieldset>
      <label id="name-label">Username: <input type="text" name="username" id="name" placeholder="username" required>
            </label>
      <label id="email-label">Email: <input id="email" type="email" name="address" placeholder="email" required>
            </label>
      <label id="number-label">Age: <input id="number" type="number" min="21" max="120" name="age" placeholder="21">
            </label>
      <label>Which Wallet Do You Use? <select name="wallet" id="dropdown" required>
              <option value="">Select Wallet</option>
              <option value="1">MetaMask</option>
                <option value="2">Coinbase</option>
                <option value="3">Wallet Connect</option>
              </fieldset>
              <fieldset>
              <label>How Many Times do you Play Per Week?</label>
      <label><input type="radio" name="#oftimes" class="align" value="1">0-1</label>
      <label><input type="radio" name="#oftimes" class="align" value="2">2-7</label>
      <label><input type="radio" name="#oftimes" class="align" value="3">8+</label>

【问题讨论】：

请贴一些代码！我们应该如何在没有看到它的情况下帮助您。
对不起，我不知道如何输入代码。我更新了它。
请使用代码sn-ps！没有人，至少我不会，将这段代码复制粘贴到他们的编辑器中并运行它。
请看this
好吧，我不知道。

标签： html css forms radio-button

【解决方案1】：

您还没有关闭它之前的<label> 和<select> 元素。关闭它们，它应该可以工作，如下所示：

<label>Which Wallet Do You Use?</label>
<select name="wallet" id="dropdown" required>
  <option value="">Select Wallet</option>
  <option value="1">MetaMask</option>
  <option value="2">Coinbase</option>
  <option value="3">Wallet Connect</option>
</select>

我建议了解如何在您选择的代码编辑器上“自动缩进”，或者养成保持完美缩进的习惯，因为当代码正确缩进时，这些问题很容易发现和避免： ) 它还让一切变得更整洁、更易于使用！

【讨论】：