css 想要删除HTML代码中文本区域和提交按钮之间的行

1szpjjfi  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(88)

我对HTML很陌生，学习20年后，请大家帮忙。这可能是一个简单的问题，为你所有，对不起张贴在这里，因为我不能解决它自己。在下面的代码中，
1.我想删除 * 文本区 * 行和提交按钮之间的空格。
1.我希望在“提问”文本框和下面的提交按钮之间没有白色 * 或 * 线条 *。
1.另外，我还想将上传按钮移动到与“选择文件”相同的行/行

PS：我没有使用任何单独的CSS文件。

<!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;
    }
    
    .heading {
      color: orange;
      text-align: left;
      font-size: 14px;
    }
    
    textarea {
      width: 100%;
      margin-bottom: 6px;
      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;
      font-size: 10px;
      background: #ff8a26;
      border: none;
      color: #fff;
      padding: 0.5% 1%;
      border-radius: 6px !important;
    }
    
    button:hover {
      background-color: #FF4500;
    }
    
    .my-form {
      background: #f7fbfc !important;
    }
    
    h3 {
      color: rgb(157, 46, 46);
    }
  </style>
  <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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
</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"><br><br>
        <button type="submit" name="action" value="Upload">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><br><br>
        <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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <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></script>
</body>

</html>
css

2条答案

按热度按时间
py49o6xq

py49o6xq1#

您可以通过删除所有<br>换行符标记来解决这两个问题。
文件<input>后有两个，<textarea>后有两个。
下面的片段只是你的一个副本，删除了这些标签：

<!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;
    }
    
    .heading {
      color: orange;
      text-align: left;
      font-size: 14px;
    }
    
    textarea {
      width: 100%;
      margin-bottom: 6px;
      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;
      font-size: 10px;
      background: #ff8a26;
      border: none;
      color: #fff;
      padding: 0.5% 1%;
      border-radius: 6px !important;
    }
    
    button:hover {
      background-color: #FF4500;
    }
    
    .my-form {
      background: #f7fbfc !important;
    }
    
    h3 {
      color: rgb(157, 46, 46);
    }
  </style>
  <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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
</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">
        <button type="submit" name="action" value="Upload">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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <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></script>
</body>

</html>
赞(0）分享  回复(0）举报  2023-06-25
wkyowqbh

wkyowqbh2#

在<textarea>之后有两个换行符。去掉一个，你的代码应该可以工作了

<!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;
    }
    
    .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: 0;
      margin-right: 5px;
      font-size: 10px;
      background: #ff8a26;
      border: none;
      color: #fff;
      padding: 0.5% 1%;
      border-radius: 6px !important;
    }
    
    button:hover {
      background-color: #FF4500;
    }
    
    .my-form {
      background: #f7fbfc !important;
    }
    
    h3 {
      color: rgb(157, 46, 46);
    }
  </style>
  <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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
</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"><br><br>
        <button type="submit" name="action" value="Upload">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><br><br>
        <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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <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></script>
</body>

</html>
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com