时间戳

首页 > 解决方案 > 如何将按钮并排对齐？

html - 如何将按钮并排对齐？

问题描述

我的目标是将按钮并排对齐，并在它们之间留出一小块空间来区分它们。由于使用了不同的方法，在同一个 div 中的按钮之前有一个文件输入。

<div class="container">
  <div class="row">
    <div class="col">

      <h1>Upload the file</h1>
      <hr>

      <form action="/upload-file" method="POST" enctype="multipart/form-data">

        <div class="form-group">
          <label>Select file</label>
          <div class="custom-file">
            <input type="file" class="custom-file-input" name="Dataset" id="Dataset">
            <label class="custom-file-label" for="Dataset">Select file...</label>
          </div>
        </div>

        <button type="submit" class="btn btn-primary">De-indentify</button>
      </form>
      
      <form action="/execute-file" method="GET" enctype="multipart/form-data">
        <button type="submit" class="btn btn-primary">Download it</button>
      </form>
      

    </div>
  </div>
</div>

标签： htmlcss

解决方案

 form {
    display: inline;
  }
  .form-group {
    display: inline-block;
  }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <h1>Upload the file</h1>
        <hr>
        <form action="/upload-file" method="POST" enctype="multipart/form-data">
          <div class="form-group">
            <div class="custom-file">
              <label class="custom-file-label" for="Dataset">Select file...</label>
              <input type="file" class="custom-file-input" name="Dataset" id="Dataset">
            </div>
          </div>
          <button type="submit" class="btn btn-primary">De-indentify</button>
        </form>
        <form action="/upload-file" method="GET" enctype="multipart/form-data">
          <button type="submit" class="btn btn-primary">Download it</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

注意：您只需要添加上面的 css。

推荐阅读