HTML代码调整需求：消除元素间距与调整按钮位置

针对你提出的三个布局问题，直接调整HTML结构和内联CSS即可解决，具体方案如下：

1. 消除textarea与submit button之间的空白 #

• 移除textarea样式中的margin-bottom: 6px，改为margin-bottom: 0；
• 删除表单内textarea后面的<br><br>换行标签，避免额外空白。

2. 移除“Ask your question”文本框与下方submit button之间的空白/换行 #

和问题1处理逻辑一致：

• 确保该区域textarea的margin-bottom为0；
• 删除textarea后的<br><br>标签。

3. 将Upload button与“choose file”控件放在同一行 #

• 去掉file输入框和button之间的<br><br>；
• 给file输入框和button添加d-inline-block类（利用Bootstrap的行内块布局），或者在CSS中设置display: inline-block；
• 给button添加margin-left: 8px，让两者间距更合理。

调整后的完整代码 #

<!DOCTYPE html>
<html>

<head>
  <title>Upload PDF</title>
  <style>
    body {
      background-color: #f2f2f2;
      font-size: 12px;
      font-family: Arial, sans-serif;
    }
    
    input[type="file"] {
      border: none !important;
      color: orange;
      display: inline-block; /* 确保和button同行 */
    }
    
    .heading {
      color: orange;
      text-align: left;
      font-size: 14px;
    }
    
    textarea {
      width: 100%;
      margin-bottom: 0; /* 移除底部外边距 */
      padding: 12px 20px;
      box-sizing: border-box;
      font-size: 12px;
      border: 2px solid #ccc;
      border-radius: 4px;
      resize: vertical;
      white-space: pre-line;
      overflow: auto;
    }
    
    button {
      margin-top: 0px;
      margin-right: 5px;
      margin-left: 8px; /* 上传按钮和文件框间距 */
      font-size: 10px;
      background: #ff8a26;
      border: none;
      color: #fff;
      padding: 0.5% 1%;
      border-radius: 6px !important;
      display: inline-block; /* 确保和file输入框同行 */
    }
    
    button:hover {
      background-color: #FF4500;
    }
    
    .my-form {
      background: #f7fbfc !important;
    }
    
    h3 {
      color: rgb(157, 46, 46);
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container mt-3">
    <h3>Extract, Search and Ask using LLM</h3>

    <div class="card mt-3 px-5 pb-5 pt-4 shadow-lg my-form">
      <!-- Upload section -->
      <h2 class="heading">Upload a File</h2>
      <form method="POST" enctype=multipart/form-data>
        <input type="file" name="file" class="d-inline-block">
        <button type="submit" name="action" value="Upload" class="d-inline-block">Upload</button>
      </form>

      <!-- Extracted data display -->
      <h2 class="heading pt-3">Report Data</h2>
      <textarea rows="4" readonly>{{ extracted_text }}</textarea>

      <!-- Question and Answer section -->
      <h2 class="heading pt-3">Ask Your Question</h2>
      <form method="POST">
        <!-- height of textarea can be changed as per requirement by changing the "rows" value -->
        <textarea name="question" rows="1">{{ request.form.question }}</textarea>
        <button type="submit" name="action" value="Ask">Submit</button>
      </form>

      <h2 class="heading pt-3">GPT Response</h2>
      <textarea rows="3" readonly>{{ response }}</textarea>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin="anonymous"></script>
</body>

</html>

关键修改说明 #

1. textarea底部空白：把所有textarea的margin-bottom从6px改为0，同时删除提问区域textarea后的<br><br>；
2. 上传控件同行：移除上传区域的<br><br>，给file输入框和button添加d-inline-block类，并给button加margin-left调整间距；
3. 调整了Bootstrap CSS和JS的加载顺序，先加载CSS再加载JS，避免样式加载延迟。

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