请问如何将标签和输入放在同一行？答案

【问题标题】：How can I put the label and the input on the same line please?请问如何将标签和输入放在同一行？
【发布时间】：2021-09-17 10:46:05
【问题描述】：

请问如何将标签和输入放在同一行？ 我希望标签和输入之间也有 1.5 厘米的间距。

通过搜索here，我必须使用form-inline，但不能将标签和输入放在同一行。

非常感谢您的测试。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <h1 id="welcome">HTML CSS JS</h1>
      <div class="col-12 col-md-6 col-lg-3">
         <div class="form-group ">
            <label for="date">Start date</label>
            <div class="input-group">
               <input name="beginDate" id="beginDate" type="text" class="form-control"
               style="background-color: white;"
               (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
               <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
               ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
               (ngModelChange)="changedBeginDate($event)"
               style="position: absolute; left: 0; visibility: hidden">
               <div class="input-group-append" (click)="dp1.toggle()">
                  <span class="input-group-text" id="basic-addon2">
                  <i class="icon-regular i-Calendar-4"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
     
     <div class="col-12 col-md-6 col-lg-3">
   <div class="form-group form-inline">
      <label for="date">End date</label>
      <div class="input-group">
         <input name="beginDate" id="beginDate" type="text" class="form-control"
         style="background-color: white;"
         (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
         <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
         ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
         (ngModelChange)="changedBeginDate($event)"
         style="position: absolute; left: 0; visibility: hidden">
         <div class="input-group-append" (click)="dp1.toggle()">
            <span class="input-group-text" id="basic-addon2">
            <i class="icon-regular i-Calendar-4"></i>
            </span>
         </div>
      </div>
   </div>
</div>
     
 
   </body>
</html>

【问题讨论】：

这是根据你的 sn-p 所做的。

标签： html css bootstrap-4

【解决方案1】：

.form-group {
  display: flex;
  column-gap: 20px;
  margin-bottom: 12px;
}

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <h1 id="welcome">HTML CSS JS</h1>
      <div class="col-12 col-md-6 col-lg-3">
         <div class="form-group ">
            <label for="date">Start date</label>
            <div class="input-group">
               <input name="beginDate" id="beginDate" type="text" class="form-control"
               style="background-color: white;"
               (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
               <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
               ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
               (ngModelChange)="changedBeginDate($event)"
               style="position: absolute; left: 0; visibility: hidden">
               <div class="input-group-append" (click)="dp1.toggle()">
                  <span class="input-group-text" id="basic-addon2">
                  <i class="icon-regular i-Calendar-4"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
     
     <div class="col-12 col-md-6 col-lg-3">
   <div class="form-group form-inline">
      <label for="date">End date</label>
      <div class="input-group">
         <input name="beginDate" id="beginDate" type="text" class="form-control"
         style="background-color: white;"
         (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
         <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
         ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
         (ngModelChange)="changedBeginDate($event)"
         style="position: absolute; left: 0; visibility: hidden">
         <div class="input-group-append" (click)="dp1.toggle()">
            <span class="input-group-text" id="basic-addon2">
            <i class="icon-regular i-Calendar-4"></i>
            </span>
         </div>
      </div>
   </div>
</div>
     
 
   </body>
</html>

【讨论】：

【解决方案2】：

试试这样的：

<div class="input date">
    <label>Date</label>
    <input type="text" for="Date">
</div>

然后创建input 类display: flex;

.input {
    display: flex;
}
.input label {
    margin-right: 20px;
}

【讨论】：

【解决方案3】：

这是你想要的吗？

https://jsfiddle.net/jkL6crdm/

.form-group {
    display: -webkit-inline-box;
}

.form-group {
    display: -webkit-inline-box;
}

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <h1 id="welcome">HTML CSS JS</h1>
      <div class="col-12 col-md-6 col-lg-3">
         <div class="form-group ">
            <label for="date">Start date</label>
            <div class="input-group">
               <input name="beginDate" id="beginDate" type="text" class="form-control"
               style="background-color: white;"
               (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
               <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
               ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
               (ngModelChange)="changedBeginDate($event)"
               style="position: absolute; left: 0; visibility: hidden">
               <div class="input-group-append" (click)="dp1.toggle()">
                  <span class="input-group-text" id="basic-addon2">
                  <i class="icon-regular i-Calendar-4"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
     
     <div class="col-12 col-md-6 col-lg-3">
   <div class="form-group form-inline">
      <label for="date">End date</label>
      <div class="input-group">
         <input name="beginDate" id="beginDate" type="text" class="form-control"
         style="background-color: white;"
         (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
         <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
         ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
         (ngModelChange)="changedBeginDate($event)"
         style="position: absolute; left: 0; visibility: hidden">
         <div class="input-group-append" (click)="dp1.toggle()">
            <span class="input-group-text" id="basic-addon2">
            <i class="icon-regular i-Calendar-4"></i>
            </span>
         </div>
      </div>
   </div>
</div>
     
 
   </body>
</html>

【讨论】：

【解决方案4】：

当您使用引导程序时，将“d-flex”类添加到父元素就可以了。像这样：

<div class="form-group d-flex">

【讨论】：