如何让两个表单的提交按钮横向并排显示？

你遇到的核心问题是：两个<form>元素本身是块级元素，默认会独占一行，所以只给按钮设置display: inline无法让它们横向并排，得先让两个表单能在同一行布局。以下是几种有效解决方法：

方法一：利用Bootstrap工具类快速实现（推荐） #

因为你已经在用Bootstrap的btn类，直接给两个表单加一个Flex布局的父容器即可：

<!-- 新增父容器，用Bootstrap的d-flex和gap-2实现横向排列+间距 -->
<div class="d-flex gap-3 align-items-start">
  <form class="listing_form" action="{% url 'listing' listing.id  %}" method="post">
      {% csrf_token %}
      {{ form }}
      <input class="btn btn-primary" type="submit" value="Place Bid">
  </form>
  <form class="listing_form_close" action="{% url 'close' listing.id %}" method="post">
      {% csrf_token %}
      {% if listing.listedBy.username == request.user.username %}
      <input class="btn btn-danger" type="submit" value="Close Bid">
      {% endif %}
  </form>
</div>

• d-flex：将父容器设为Flex布局，子元素自动横向排列
• gap-3：给两个表单之间添加间距（数值可调整，比如gap-2、gap-4）
• align-items-start：让两个表单顶部对齐，避免因表单高度不同导致错位

方法二：自定义CSS设置表单为行内块元素 #

如果不想依赖Bootstrap工具类，直接给两个表单设置display: inline-block：

.listing_form, .listing_form_close {
  display: inline-block;
  vertical-align: top; /* 确保两个表单顶部对齐 */
  margin-right: 20px; /* 按钮之间的间距 */
}

HTML部分保持原结构不变即可，这样两个表单会在同一行显示，按钮自然横向并排。

为什么你之前的CSS无效？ #

<form>是HTML默认的块级元素，宽度默认占满父容器，会独占一行。你之前只给按钮设置display: inline，但按钮所在的表单还是会占据一整行，所以两个按钮只能在各自的表单行内，无法横向并排。

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