Html Django模板中的单选按钮布局混乱

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

<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>

{%csrf_令牌%}
{{form.bio.label_tag}{{form.bio}}
{{form.mobilenumber.label_tag}{{form.mobilenumber}}
{{form.age.label_tag}{{form.age}}
{{form.gender.label_tag}{{form.gender}}
{{form.monthly_status.label_tag}{{{form.monthly_status}}

此表单以单独的行显示文本字段，但单选按钮显示为缩进。请参见屏幕截图：

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

编辑：

---

我不想将所有内容都打包到一个表中，因为虽然它解决了问题，但该表对小屏幕（例如功能手机，我的主要市场）没有响应。

将上述代码更改为以下内容：

<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>

{%csrf_令牌%}
{{form.bio.errors}}
{{form.bio.label_tag}{{form.bio}}
{{form.mobilenumber.errors}}
{{form.mobilenumber.label_tag}{{form.mobilenumber}}
{{form.age.errors}}
{{form.age.label_tag}{{form.age}}

{{form.gender.errors}
{form.gender.label_-tag}
{form.gender%}{{radio.choice_-label}{{radio.tag}{%endfor%}

{{form.monthly_status.errors}}
{{form.mary_status.label_tag}
{form.mary_status%}{{radio.choice_label}}{{radio.tag}{%endfor%}

参考：

---

我需要的是对单选按钮进行粒度控制；我上面写的代码正好告诉了我这一点

将上述代码更改为：

<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>

{%csrf_令牌%}
{{form.bio.errors}}
{{form.bio.label_tag}{{form.bio}}
{{form.mobilenumber.errors}}
{{form.mobilenumber.label_tag}{{form.mobilenumber}}
{{form.age.errors}}
{{form.age.label_tag}{{form.age}}

{{form.gender.errors}
{form.gender.label_-tag}
{form.gender%}{{radio.choice_-label}{{radio.tag}{%endfor%}

{{form.monthly_status.errors}}
{{form.mary_status.label_tag}
{form.mary_status%}{{radio.choice_label}}{{radio.tag}{%endfor%}

参考： 我需要的是对单选按钮进行粒度控制；我上面写的代码正好告诉了我这一点