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

它尝试帮助完整

＆＃13;

<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>

＆＃13;

Answer 3

由于您使用的是bootstrap，因此可以使用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>

Answer 4

只需使用
标签：

＆＃13;

$os = OrderShipment::where('order_id', $shipment->orderReferenceNumber)->update([ "api_shipment_id" => $data->shipmentId ]);

＆＃13;

HTML放置输入类型彼此相邻

4 个答案: