ラジオ入力を別の行に表示するが、ラジオセレクタと同じ行にテキストを保持する

Question

単純な多肢選択式クイズを作成しようとしている。

は、しかし、私はそのために必要な間隔を制御するために必要なCSSを実装するいくつかの困難が生じています：これは私が達成しようとしているレイアウトです。

各入力の表示を「ブロック」に変更し、各ラジオボタンを別々の行にしている間に、そのラジオボタンのテキストも別の行に入れて、次のように表示されます。

ことが望まれているものを明確ではないので、どのように私は別々のライン上にあるだけでなく、同じライン上の各無線入力用のテキストを維持するためにラジオボタンのそれぞれを強制することができますか？私はまた、質問番号とその質問のオプションの間のスペースを減らすことができ、それぞれの質問の間のスペースを増やすことができるようにしたい（各質問は現在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

それぞれを持っているためにinput/textコンボはそれ自身の行にあり、ブロック要素で囲むだけです。あなたのテキストは、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>