表单中的并排输入 - HTML、Flask

Question

我正在使用 Flask 开发 Web 应用程序。我想在主页中放置一个表单，允许用户上传文件并提交到服务器。

这是有效的：

  <div class="jumbotron">
    <div class="container">
      <h1>Automatic Guitar Music Transcription</h1>
    </div>
  </div>
  <div class="container">
    <p class="lead">Upload your audio file below:</p>
    <form method="POST" action="/" enctype="multipart/form-data">
      <input name="file" type="file"/>
      <input type="submit"/>
    </form>
  </div>

(JSFiddle)

不过，我真正的index.html是一个Flask模板，也是用Bootstrap的。

{%- extends "base.html" %}

{% import "bootstrap/utils.html" as utils %}

{% block content %}
  {% if request == "GET": %}

  <div class="jumbotron">
    <div class="container">
      <h1>Automatic Guitar Music Transcription</h1>
    </div>
  </div>
  <div class="container">
    <p class="lead">Upload your audio file below:</p>
    <form method="POST" action="/" enctype="multipart/form-data">
      <input name="file" type="file"/>
      <input type="submit"/>
    </form>
  </div>

  ...more HTML...

  {% endif %}
{% endblock %}

{% block scripts %}
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  <script src="https://rawgit.com/mattdiamond/Recorderjs/master/dist/recorder.js"></script>
  <script src="{{url_for('static', filename='js/record.js')}}"></script>
{% endblock %}

不幸的是，这样，我没有像在 JSFiddle 中那样并排获得输入按钮，而是在文件上传按钮下获得提交按钮：

为什么会这样？谢谢。

Answer 1

使用一个简单的表格来实现：

<table>
    <tr>
        <td><input name="file" type="file"/></td>
        <td><input type="submit"/></td>
    </tr>
</table>