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中添加了以下内容：

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

你可以更好地坚持使用默认的bootstrap类而不是创建css hacks。

＆＃13;

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

＆＃13;

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

将输入文本字段彼此对齐

3 个答案: