如何排列单选按钮和文本

Question

我添加了

.form-radio{
display: block;
}

使我的单选按钮在另一个之下，而不是彼此相邻。但是现在与每个按钮相关联的文本也会出现在下面。我希望每个收音机的文本都在单选按钮旁边。

这是HTML：

<div class="form-item form-type-radio form-item-submitted-contactus-question-type-label-contactus-question-type">
 <input id="edit-submitted-contactus-question-type-label-contactus-question-type-1" name="submitted[contactus_question_type_label][contactus_question_type]" value="&quot;general" class="form-radio" type="radio">  

<label class="option" for="edit-submitted-contactus-question-type-label-contactus-question-type-1">General, questions about student aid or about your own student aid situation, including your student loans or questions/comments about any website content." </label>

</div> 

<div class="form-item form-type-radio form-item-submitted-contactus-question-type-label-contactus-question-type">
 <input id="edit-submitted-contactus-question-type-label-contactus-question-type-2" name="submitted[contactus_question_type_label][contactus_question_type]" value="&quot;technical" class="form-radio" type="radio">  

<label class="option" for="edit-submitted-contactus-question-type-label-contactus-question-type-2">Technical Question, questions or comments about our website (such as a broken link or something else not working properly)." </label>
    </div>

感谢您的帮助

Answer 1

将display: inline-block;添加到.form-radio，如下所示：

<强> DEMO

＆＃13;

＆＃13;

.form-radio {
    display: inline-block;
}

＆＃13;

<div class="form-item form-type-radio form-item-submitted-contactus-question-type-label-contactus-question-type">
    <input id="edit-submitted-contactus-question-type-label-contactus-question-type-1" name="submitted[contactus_question_type_label][contactus_question_type]" value="&quot;general" class="form-radio" type="radio">
    <label class="option" for="edit-submitted-contactus-question-type-label-contactus-question-type-1">General, questions about student aid or about your own student aid situation, including your student loans or questions/comments about any website content."</label>
</div>
<div class="form-item form-type-radio form-item-submitted-contactus-question-type-label-contactus-question-type">
    <input id="edit-submitted-contactus-question-type-label-contactus-question-type-2" name="submitted[contactus_question_type_label][contactus_question_type]" value="&quot;technical" class="form-radio" type="radio">
    <label class="option" for="edit-submitted-contactus-question-type-label-contactus-question-type-2">Technical Question, questions or comments about our website (such as a broken link or something else not working properly)."</label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

 .form-type-radio {
     display: block;
 }
 .form-type-radio input,
 .form-type-radio label {
     display: inline;
 }

    .form-type-radio {
      display: block;
    }
    .form-type-radio input,
    .form-type-radio label {
      display: inline;
    }

<div class="form-item form-type-radio form-item-submitted-contactus-question-type-label-contactus-question-type">
  <input id="edit-submitted-contactus-question-type-label-contactus-question-type-1" name="submitted[contactus_question_type_label][contactus_question_type]" value="&quot;general" class="form-radio" type="radio">
  <label class="option" for="edit-submitted-contactus-question-type-label-contactus-question-type-1">Gen‌eral, questions about student aid or about your own student aid situation, including your student loans or questions/comments about any website content."</label>

</div>

<div class="form-item form-type-radio form-item-submitted-contactus-question-type-label-contactus-question-type">

  <input id="edit-submitted-contactus-question-type-label-contactus-question-type-1" name="submitted[contactus_question_type_label][contactus_question_type]" value="&quot;general" class="form-radio" type="radio">
  <label class="option" for="edit-submitted-contactus-question-type-label-contactus-question-type-1">Other Stuff</label>
</div>

Answer 3

这个？

http://jsfiddle.net/ht6p0phv/1/

2个选项：

1. 将每个单选按钮及其文本包装在一个块元素中，如：p s
2. 在行尾使用<br />

还有其他......