如何将 3 个按钮与每个表单对齐？ [复制]答案

【问题标题】：How to row-align 3 buttons with a form each? [duplicate]如何将 3 个按钮与每个表单对齐？ [复制]
【发布时间】：2020-08-15 20:44:48
【问题描述】：

我正在尝试连续对齐 3 个按钮，但到目前为止没有任何效果。我已经清空了我的 CSS。用按钮实现行行的最佳方法是什么？

也许有一种方法可以只使用 1 个表单来执行此代码。

HTML

 <form action="link1" method="post"><button type="submit">Button 1</button></form>
 <form action="link2" method="post"><button type="submit">Button 2</button></form>
 <form action="link3" method="post"> <button type="submit">Button 3</button></form>

Screenshot of the page

非常感谢！

更新：

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="/static/style.css">  
</head>
<body>

<div class='container'>
  <form action="#" method="post"><button type="submit">Button 1</button></form>
  <form action="#" method="post"><button type="submit">Button 2</button></form>
  <form action="#" method="post"> <button type="submit">Button 3</button></form>
</div>
</body>
</html>

CSS：

.container {
    display:flex
}

更新 2：错误已修复，它在路径中，因为我使用的是 Flask，我需要将 CSS 放在 CSS 文件夹中。现在它正在工作。非常感谢！

【问题讨论】：

@Patricia Bota，请尝试为这 3 个表单的容器设置 display:flex。让我知道它是否有效。
使用 .grid 容器
我不知道为什么，但我无法发布答案
w3schools.com/css/css_grid.asp
@PatriciaBota，请检查路径：。 100% 正确吗？

标签： html css forms button

【解决方案1】：

.container {
display:flex
}

<div class="container" >
  <form action="link1" method="post"><button type="submit">Button 1</button></form> <form action="link2" method="post"><button type="submit">Button 2</button></form> <form action="link3" method="post"> <button type="submit">Button 3</button>
  </form> 
</div>

【讨论】：

@Patricia Bota，这是你想要达到的目标吗？
谢谢。非常感谢您的帮助！但我仍然在列中获得按钮。我应该在 HTML 头部有任何链接吗？
@PatriciaBota，请显示更多您的代码。如果您将表单放在容器内并将其设置为 display:flex ，那么您将不会遇到问题。您的代码可能有问题
我用你的解决方案和我的整个代码编辑了我的问题。