html - Django 模板中的单选按钮布局困惑

Question

我有一个 Django 模板，用户可以在其中填写她的简历、手机号码、年龄、性别和婚姻状况。性别和婚姻状况是带有两个选项的单选按钮，前 3 个选项是文本字段。模板布局如下:

<form method="post" action="">
  {% csrf_token %}
  {{ form.bio.label_tag }}{{ form.bio }}<p>
  {{ form.mobilenumber.label_tag }}{{ form.mobilenumber }}<p>   
  {{ form.age.label_tag }}{{ form.age }}<p>
  {{ form.gender.label_tag }}{{ form.gender }}<p>
  {{ form.marital_status.label_tag }}{{ form.marital_status }}<p> 
  <input class="button" style="background-color:#F6F6F6" type="submit" value="Save">
</form>

此表单在单独的行中显示文本字段，但单选按钮显示为缩进。看截图:

如何使单选按钮与表单的其余部分内嵌显示？我不明白为什么这件事会这样。我的代码很简单。

编辑:我不想将所有内容都放在表格中，因为虽然它解决了问题，但表格对小屏幕尺寸没有响应(例如，功能手机，对我来说是一个关键市场)。

Answer 1

将上面的代码改成如下:

<form method="post" action="">
  {% csrf_token %}
  {{ form.bio.errors }}<p>
  {{ form.bio.label_tag }}{{ form.bio }}<p>
  {{ form.mobilenumber.errors }}<p> 
  {{ form.mobilenumber.label_tag }}{{ form.mobilenumber }}<p>   
  {{ form.age.errors }}<p>  
  {{ form.age.label_tag }}{{ form.age }}<br>
  {{ form.gender.errors }}
  {{ form.gender.label_tag }}<br>{% for radio in form.gender %}<table><tr><label for="{{ radio.id_for_label }}"><td><span style="margin-left:2em">{{ radio.choice_label }}</span><span style="margin:auto">{{ radio.tag }}</span></td></label></tr></table>{% endfor %}<br>
  {{ form.marital_status.errors }}
  {{ form.marital_status.label_tag }}<br>{% for radio in form.marital_status %}<table><tr><label for="{{ radio.id_for_label }}"><td><span style="margin-left:2em">{{ radio.choice_label }}</span><span class="radio">{{ radio.tag }}</span></td></label></tr></table>{% endfor %}<br>
  <input class="button" style="background-color:#F6F6F6" type="submit" value="Save">
</form>

引用:https://docs.djangoproject.com/en/1.8/ref/forms/widgets/#django.forms.RadioSelect我需要的是对单选按钮进行粒度控制；我上面写的代码正是这样。