html - 在不同的行上显示 radio 输入，但将文本与 radio 选择器保持在同一行

Question

我正在尝试创建一个简单的多项选择测验。这是我要实现的布局:

但是，我在实现控制所需间距所需的 CSS 时遇到了一些困难。

我将每个输入的显示更改为“ block ”，虽然这将每个单选按钮放在一个单独的行中，但它也将该单选按钮的文本也放在一个单独的行中，因此它看起来像这样:

因为这显然不是我们想要的，我如何才能强制每个单选按钮位于单独的行，同时让每个单选输入的文本保持在相同 线？我还希望能够减少问题编号和该问题的选项之间的空间，然后增加每个问题之间的空间(每个问题目前是一个 div)，有时搞砸一件事会搞砸另一件事。

页面的完整 HTML 和 CSS 可以在这里找到: http://interlinked.x10host.com/projects/landlines/telcoquiz.html

相关的 HTML 是:

      <div id="quiz">
            <div id="quiztext">
                <p>Let's get started!</p>
                <p>You will be taking the 10-question Telephone Quiz. All questions are multiple-choice, with one correct answer each. If you pass, you will recieve the Honorary Telephone Award!</p>
            </div>
            <div id="form">
                <form id="telcoform">
                    <div class="quizItem"><p class="qNumber">1</p>
                        <input type="radio" name="question1" value="1a">Option A</input>
                        <input type="radio" name="question1" value="1b">Option B</input>
                    </div>
                    <div class="quizItem"><p class="qNumber">2</p>
                        <input type="radio" name="question2" value="2a">Option A</input>
                        <input type="radio" name="question2" value="2b">Option B</input>
                        <input type="radio" name="question2" value="2c">Option C</input>
                    </div>
                </form>
            </div>
        </div>

相关的 CSS 是:

    #quiz {
        display: none;
    }
    #beginButton, #quiztext {
        text-align: center;
    }
    #form {
        text-align: left;
        margin-left: 115px;
        margin-right: 115px;
    }
    #telcoform {

    }
    .quizItem {

    }
    .quizItem input {

    }
    .qNumber {
        font-family: 'merriweatherregular';
        font-weight: 700;
    }

Answer 1

要让每个输入/文本组合都在它自己的行上，只需将它们包装在一个 block 元素中。虽然您的文本也应该位于与 input 关联的 label 中 - 不是必需的，但更好、更易于访问的标记和更好的 UX，因为它允许您单击文本以选择输入。

#beginButton,
#quiztext {
  text-align: center;
}

#form {
  text-align: left;
  margin-left: 115px;
  margin-right: 115px;
}

#telcoform {}

.quizItem {}

.quizItem input {}

.qNumber {
  font-family: 'merriweatherregular';
  font-weight: 700;
}

<div id="quiz">
  <div id="quiztext">
    <p>Let's get started!</p>
    <p>You will be taking the 10-question Telephone Quiz. All questions are multiple-choice, with one correct answer each. If you pass, you will recieve the Honorary Telephone Award!</p>
  </div>
  <div id="form">
    <form id="telcoform">
      <div class="quizItem">
        <p class="qNumber">1</p>
        <div><input type="radio" name="question1" value="1a" id="q-1a"><label for="q-1a">Option A</label></div>
        <div><input type="radio" name="question1" value="1b" id="q-1b"><label for="q-1b">Option B</label></div>
      </div>
      <div class="quizItem">
        <p class="qNumber">2</p>
        <div><input type="radio" name="question2" value="2a" id="q-2a"><label for="q-2a">Option A</label></div>
        <div><input type="radio" name="question2" value="2b" id="q-2b"><label for="q-2b">Option B</label></div>
          <div><input type="radio" name="question2" value="2c" id="q-2c"><label for="q-2c">Option C</label></div>
      </div>
    </form>
  </div>
</div>