如何使不同的 Django 表单输入按钮显示在同一行
Posted
技术标签:
【中文标题】如何使不同的 Django 表单输入按钮显示在同一行【英文标题】：How to make different Django form input buttons display on same line 【发布时间】：2020-07-03 08:30:12 【问题描述】：我正在处理的页面上使用两个单独的 Django 表单，我希望输入按钮显示在同一行。目前，它们正在堆叠。我尝试使用 CSS 样式来使用内联块，但我认为这不起作用，因为它们是单独的形式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="song_edit.css" />
</head>
<body>
<form method="POST" id="form1"> % csrf_token %
<li> file_name </li>
<li> form.as_p </li>
<input type="submit" class="btn btn-primary" value="Download" name="save" id="download" />
</form>
<form action="/path/" method="get" id="form2">
<input type="submit" class="btn btn-secondary" name="next" value="Next" id="Next" />
</form>
</body>
</html>
Fiddle
【问题讨论】：
如果您不向服务器发送数据，为什么还要使用表单？ 我最初计划将数据保存在数据库中并稍后检索，但意识到没有必要这样做。那么有一种不使用 Django 表单的更简单的方法吗？ 无论如何，您希望表单彼此相邻在两个表单上使用inline-block jsfiddle.net/fuo6ybq4
如果您的表单在<li>，请考虑将display: inline-block; 添加到<li>s 自己
【参考方案1】：
this fiddle 你想要什么按钮？只是你的表单需要内联显示
form
display:inline;
【讨论】：
或class="d-inline-block"，因为正在使用引导程序以上是关于如何使不同的 Django 表单输入按钮显示在同一行的主要内容，如果未能解决你的问题，请参考以下文章
如何显示作为最终 django 表单向导步骤输入的所有数据的预览？