HTML配售彼此相鄰

Question

在下面的HTML代碼段輸入類型，我想要顯示的文本字段彼此相鄰：

<div class="home-page"> 
    <div class="container page"> 
    <div class="row"> 

     <div class="col-md-6 col-xs-12"> 
     <h2>Search...</h2> 
     <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate> 
      <!-- div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
      <label for="email">E-Mail</label> 
      <input type="text" class="form-control" name="firstName" [(ngModel)]="model.email" #email="ngModel" required /> 
      <div *ngIf="f.submitted && !email.valid" class="help-block">E-Mail is required</div> 
      </div --> 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
      <label for="firstName">First Name</label> 
      <input type="text" class="form-control-small" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" required /> 
      <input type="text" class="form-control-small" name="powerPlantType" [(ngModel)]="model.powerPlantType" #powerPlantType="ngModel" required /> 
      <div *ngIf="f.submitted && !firstName.valid" class="help-block">First Name is required</div> 
      </div> 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
      <label for="lastName">Last Name</label> 
      <input type="text" class="form-control-small" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required /> 
      <div *ngIf="f.submitted && !lastName.valid" class="help-block">Last Name is required</div> 
      </div> 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
      <label for="username">Username</label> 
      <input type="text" class="form-control-small" name="username" [(ngModel)]="model.username" #username="ngModel" required /> 
      <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div> 
      </div> 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }"> 
      <label for="password">Password</label> 
      <input type="password" class="form-control-small" name="password" [(ngModel)]="model.password" #password="ngModel" required /> 
      <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div> 
      </div> 
      <div class="form-group"> 
      <button [disabled]="loading" class="btn btn-primary">Register</button> 
      <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> 
      <a [routerLink]="['/login']" class="btn btn-link">Cancel</a> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

的HTML獲取呈現如下：

這是我的CSS位於：

link rel="stylesheet" href="//demo.productionready.io/main.css" 

我不是非常熟悉造型和佈局。任何人都可以幫助我！

編輯：更新基於以下崗位：

Answer 1

<input>是一個塊級元素。

您可以從this answer瞭解更多關於block/inline-block/inline元素的信息。這將有助於您更好地瞭解佈局。

使用下面的代碼，使您的form-control-small元素內聯：

.form-group .form-control-small{ 
    display: inline-block; 
} 
/* Or if you want to show only the text fields 'type=text' next to each other then you can use */ 
.form-group input[type=text]{ 
    display: inline-block; 
} 

Answer 2

只需使用
標籤：

<div class="home-page"> 
 
    <div class="container page"> 
 
    <div class="row"> 
 

 
     <div class="col-md-6 col-xs-12"> 
 
     <h2>Search...</h2> 
 
     <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate> 
 
      <!-- div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
 
      <label for="email">E-Mail</label> 
 
      <input type="text" class="form-control" name="firstName" [(ngModel)]="model.email" #email="ngModel" required /> 
 
      <div *ngIf="f.submitted && !email.valid" class="help-block">E-Mail is required</div> 
 
      </div --> 
 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
 
      <label for="firstName">First Name</label><br/> 
 
      <input type="text" class="form-control-small" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" required /><br/> 
 
      <input type="text" class="form-control-small" name="powerPlantType" [(ngModel)]="model.powerPlantType" #powerPlantType="ngModel" required /><br/> 
 
      <div *ngIf="f.submitted && !firstName.valid" class="help-block">First Name is required</div> 
 
      </div> 
 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
 
      <label for="lastName">Last Name</label><br/> 
 
      <input type="text" class="form-control-small" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required /><br/> 
 
      <div *ngIf="f.submitted && !lastName.valid" class="help-block">Last Name is required</div> 
 
      </div> 
 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
 
      <label for="username">Username</label><br/> 
 
      <input type="text" class="form-control-small" name="username" [(ngModel)]="model.username" #username="ngModel" required /><br/> 
 
      <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div> 
 
      </div> 
 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }"> 
 
      <label for="password">Password</label><br/> 
 
      <input type="password" class="form-control-small" name="password" [(ngModel)]="model.password" #password="ngModel" required /><br/> 
 
      <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <button [disabled]="loading" class="btn btn-primary">Register</button> 
 
      <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> 
 
      <a [routerLink]="['/login']" class="btn btn-link">Cancel</a> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

它試圖幫助全

<link href="http://demo.productionready.io/main.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", crossorigin="anonymous") 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="home-page"> 
 
    <div class="container page"> 
 
    <div class="row"> 
 

 
     <div class="col-md-12 "> 
 
     <h2>Search...</h2> 
 
     <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate> 
 
     
 
     <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
 
      <label for="firstName">First Name</label> <br> 
 
      <input type="text" class="form-control-small" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" required /> 
 
      
 
      <div *ngIf="f.submitted && !firstName.valid" class="help-block">First Name is required</div> 
 
      
 
      
 
      </div> 
 
      </div> 
 
      
 
      <div class="row"> 
 
       <div class="col-xs-6"> 
 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
 
      <label for="lastName">Last Name</label><br> 
 
      <input type="text" class="form-control-small" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required /> 
 
      <div *ngIf="f.submitted && !lastName.valid" class="help-block">Last Name is required</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
      
 
      <div class="col-xs-6"> 
 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }"> 
 
      <label for="username">Username</label><br> 
 
      <input type="text" class="form-control-small" name="username" [(ngModel)]="model.username" #username="ngModel" required /> 
 
      <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div> 
 
      </div> 
 
      </div> 
 
      <div class="col-xs-6"> 
 
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }"> 
 
      <label for="password">Password</label><br> 
 
      <input type="password" class="form-control-small" name="password" [(ngModel)]="model.password" #password="ngModel" required /> 
 
      <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div> 
 
      </div> 
 
      </div> </div> 
 
      <div class="form-group"> 
 
      <button [disabled]="loading" class="btn btn-primary">Register</button> 
 
      <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> 
 
      <a [routerLink]="['/login']" class="btn btn-link">Cancel</a> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

由於您使用的引導，你可以用CSS玩。

將輸入包裝在一行中，並將每個輸入包裝在一列中（4個輸入= 4列md3）。

它可以是這樣的

<div class="row"> 
     <div class="col-md-3"> 
     First Name 
     <input type="text"> 
     </div> 

     <div class="col-md-3"> 
     Last Name 
     <input type="text"> 
     </div> 
     <div class="col-md-3"> 
     User 
     <input type="text"> 
     </div> 
     <div class="col-md-3"> 
     Pass 
     <input type="text"> 
     </div> 
    </div>