将输入文本字段彼此相邻对齐

Question

我有以下 HTML 布局：

<div class="editor-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-10 offset-md-1 col-xs-12">

        <list-errors [errors]="errors"></list-errors>

        <form [formGroup]="articleForm">
          <fieldset [disabled]="isSubmitting">

            <fieldset class="form-group">
              Organization Name<input class="form-control"
                formControlName="orgName"
                type="text"
                placeholder="Enter a valid organization name*" />
            </fieldset>

            <fieldset class="form-group">
              Description<input class="form-control"
                formControlName="orgDescription"
                type="text"
                placeholder="What's this PowerPlant about?" />
            </fieldset>

            <fieldset class="form-group">
              Minimum Power in kw<input class="form-control"
                formControlName="minPower"
                type="text"
                placeholder="Minimum power capacity in kw" />
              Maximum Power in kw<input class="form-control"
                formControlName="maxPower"
                type="text"
                placeholder="Maximum power capacity in kw" />
            </fieldset>

            <fieldset class="form-group">
              <textarea class="form-control"
                formControlName="body"
                rows="8"
                placeholder="Write your article (in markdown)">
              </textarea>
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control"
                type="text"
                placeholder="Enter tags"
                [formControl]="tagField"
                (keyup.enter)="addTag()" />

              <div class="tag-list">
                <span *ngFor="let tag of article.tagList"
                  class="tag-default tag-pill">
                  <i class="ion-close-round" (click)="removeTag(tag)"></i>
                  {{ tag }}
                </span>
              </div>
            </fieldset>

            <button class="btn btn-lg btn-primary" type="button" (click)="submitForm()">
              Add New PowerPlant
            </button>

          </fieldset>
        </form>

      </div>
    </div>
  </div>
</div>

在此，我想将最小功率和最大功率的输入类型放在同一行。现在他们一个接一个地来了。我尝试为这些输入类型添加 div，但没有任何效果。

关于如何将它们彼此相邻放置的任何想法？我得到的最接近的是通过添加这样的样式来减小 inout 类型的大小：

        <fieldset class="form-group">
          Minimum Power in kw<input class="form-control"
            formControlName="minPower"
            type="text"
            placeholder="Minimum power capacity in kw" />
          Maximum Power in kw<input class="form-control"
            formControlName="maxPower"
            type="text"
            style='width:20em'
            placeholder="Maximum power capacity in kw" />
        </fieldset>

正如你在上面看到的，我添加了

style='width:20em; float:left'

哪一种得到了我想要的效果，但仍然不够！

编辑：根据使用 form-inline 的回复，这是我得到的截图：

编辑 2：以下是来自以下答案的更新后新布局的外观：

Answer 1

您可以更好地坚持使用默认引导类，而不是创建 css hack。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <fieldset class="form-group col-xs-6">
    <label>Minimum Power in kw</label>
    <input class="form-control"
      formControlName="minPower"
      type="text"
      placeholder="Minimum power capacity in kw" />
      </fieldset>
    <fieldset class="form-group col-xs-6">
    <label>Maximum Power in kw</label>
    <input class="form-control"
      formControlName="maxPower"
      type="text"
      placeholder="Maximum power capacity in kw" />
  </fieldset>
</div>

Answer 2

好的！这是我为解决它所做的：

在我的 css 中添加了以下内容：

.form-min-max-power-input {
   width:43%;
   float:left; }

在显示最小和最大功率输入字段的 div 中使用它！

<fieldset class="form-group"><div class="form-min-max-power-input">
          Minimum Power in kw<input class="form-control"
            formControlName="minPower"
            type="text"
            placeholder="Minimum power capacity in kw" /></div><div class="form-min-max-power-input">
          Maximum Power in kw<input class="form-control"
            formControlName="maxPower"
            type="text"
            placeholder="Maximum power capacity in kw" /></div>
        </fieldset>

Answer 3

默认情况下，输入字段具有块的显示属性，这意味着您不能将元素放在它旁边。另一个元素将从下一行开始。 你可以做什么我将输入的显示属性设置为内联 HTML

<label>Minimum  power</label>
<input class="inline" type="number">
<label>Maximum power</label>
<input class="inline" type="number">

CSS

.inline{
display : inline;
}