如何在Flask Forms中实现HTML按钮的同行对齐？

问题根源是<form>标签默认是块级元素，每个form会独占一整行，所以里面的按钮自然上下排列。你之前给button加inline-block没用，因为父容器form的布局没改。

下面给两种可行的解决方法：

方法1：将form设置为inline-block #

直接修改form的display属性，让它们能在同一行显示：

form {
  display: inline-block;
  margin-right: 12px; /* 可选，给按钮之间加间距 */
}

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

HTML不需要改动，保持你原来的代码即可。

方法2：用Flex布局包裹表单 #

如果需要更灵活的布局控制，可以给两个form加个父容器，用flex布局：

HTML代码： #

<div class="button-group">
  <form action="/data1" method="GET">
      <button type="submit">Feed1</button>
  </form>

  <form action="/data2" method="GET">
      <button type="submit">Feed2</button>
  </form>
</div>

CSS代码： #

.button-group {
  display: flex;
  gap: 12px; /* 控制按钮之间的间距 */
}

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

两种方法都能让按钮在同一行显示，选哪种看你后续的布局需求。

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