html - 如何将引导内联表单置于网页中心

Question

当我将表单与下面的代码段居中对齐时，输入框和按钮将不会出现在同一行中。我需要让它们内联。我不明白为什么。请帮助任何代码示例。非常感谢您的帮助

index.html 代码

  <section class="sec1 container-fluid mt-3 pd-5 ">
  <h2 class="mt-5">Newsletter</h2>
  <p>Subscribe to this news letter to get the latest news about us</p>
    <form class="form-inline mt-2" action="/actionPage.php">
      
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      
      <button type="submit" class="btn btn-dark btn-sm">submit</button>
    </form>
</section>

style.css 代码

.sec1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #faf8fb;

}

输出图像

当我将表单置于中心时，请帮助我将输入框和按钮置于同一行（内联）

标签： htmlcssformsbootstrap-4inline

Answer 1

为了使输入框和按钮进入同一行（内联）

你可以在表单中使用 display:flex，试试下面的代码

.sec1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #faf8fb; 
padding: 20px;
}

.formHolder  {
  display: flex;
  width: 100%;
  max-width: 270px;
}

.formHolder .form-control {
  flex: 0 0 calc(100% - 80px);
  max-width: calc(100% - 80px);
}

.formHolder .btn { 
   flex: 0 0  80px;
   max-width:  80px;
}

<section class="sec1 container-fluid mt-3 pd-5 ">
  <h2 class="mt-5">Newsletter</h2>
  <p>Subscribe to this news letter to get the latest news about us</p>
    <form class="formHolder form-inline mt-2" action="/actionPage.php">
      
        <input type="email" class="form-control" id="email" placeholder="Enter email">      
         <button type="submit" class="btn btn-dark btn-sm">submit</button>
    </form>
</section>