如何让两个HTML按钮同排分置两侧？问题排查与修复

问题原因 #

原代码里的外层容器#outer使用display: inline-block，但内部的<form>是默认块级元素，会独占一行，同时这种布局也无法实现按钮分置两侧的效果。

方法1：原生Flexbox布局 #

修改#outer的样式，用Flexbox实现两侧对齐：

{% extends 'main/layout.html' %}

{% block content %}
    <div class="features">
        <h1>Главная страница</h1>
        <div style="display: flex; justify-content: space-between; align-items: center;" id="outer">
            <form action="{% url 'about' %}">
                <button class="btn btn-warning">На страницу про нас</button>
            </form>
            <form action="{% url 'data' %}">
                <button class="btn btn-warning">На страницу данных</button>
            </form>
        </div>
    </div>
{% endblock %}

{% block title %}Главная страница{% endblock %}

• display: flex：让容器内的子元素在同一行排列
• justify-content: space-between：将两个表单分别推到容器的左右两端
• align-items: center：保证按钮垂直方向居中对齐

方法2：Bootstrap内置类（推荐，若已引入Bootstrap） #

直接用Bootstrap的布局类替代内联样式，更符合框架规范：

{% extends 'main/layout.html' %}

{% block content %}
    <div class="features">
        <h1>Главная страница</h1>
        <div class="d-flex justify-content-between align-items-center" id="outer">
            <form action="{% url 'about' %}">
                <button class="btn btn-warning">На страницу про нас</button>
            </form>
            <form action="{% url 'data' %}">
                <button class="btn btn-warning">На страницу данных</button>
            </form>
        </div>
    </div>
{% endblock %}

{% block title %}Главная страница{% endblock %}

• d-flex：等价于display: flex
• justify-content-between：对应Flexbox的space-between属性
• align-items-center：实现垂直居中

布局错误排查方法 #

• 检查元素的display类型：打开浏览器开发者工具（F12），查看元素的计算样式，确认块级元素（如form、div）是否因默认display: block导致换行，按需改为inline-block或用Flex/Grid容器包裹。
• 核对盒模型参数：检查元素的margin、padding、width是否超出容器范围，导致元素错位或换行。
• 验证布局容器属性：如果用Flex/Grid布局，确认容器的justify-content、align-items等属性设置是否正确，子元素的flex/grid属性是否干扰布局。
• 排除框架默认样式：若使用Bootstrap等框架，查看框架是否给元素设置了默认样式（比如form的display: block），可通过自定义样式或框架内置类覆盖。
• 最小化代码测试：移除无关的HTML/CSS，只保留核心布局代码，逐步添加样式，定位导致异常的具体代码块。

内容的提问来源于stack exchange，提问作者Dmitriy