如何将按钮并排对齐？ [复制]答案

【问题标题】：How to align the buttons to be side by side? [duplicate]如何将按钮并排对齐？ [复制]
【发布时间】：2020-12-21 18:35:48
【问题描述】：

我的目标是将按钮并排对齐，并在它们之间留出一小块空间来区分它们。由于使用的方法不同，在同一个 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>

【问题讨论】：

你想要怎样fileinput, button and button？
使用 display: inline 或 flex 来处理对齐问题。

标签： html css

【解决方案1】：

浮动元素会导致之后的元素出现奇怪对齐的问题，并且在尝试修复它时会让人头疼。

我发现在你的按钮上添加一个 display: block 的 CSS 元素可以修复引导按钮，这样它们就可以像你想要的那样并排结束。

【讨论】：

【解决方案2】：

尝试浮动按钮所在的元素。

例如：

 div {
    float: left;
    height: 50px;
    width: 23%;
    padding: 0 10px;
  }

类似的东西，或者通过example查看这篇文章以获得更好的解释。

【讨论】：

【解决方案3】：

根据您的问题，您可以使用 bootstrap https://getbootstrap.com/docs/4.5/components/input-group/ 来完成此操作，以下是简单示例。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
      <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
    </div>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">De-</button>
    <button type="button" class="btn btn-secondary">it</button>
  </div>
</div>

【讨论】：

【解决方案4】：

 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。

【讨论】：