如何在输入字段之间制作一个小 space？

Question

如何在输入字段之间做一个小 space？仅在不使用 table 的情况下，如 Angular Material.

示例所示

<div class="content pt10" fxLayout="row" fxLayout.xs="column" fxFlexFill>
    <div fxFlex="50">
      <mat-form-field class="example-full-width">
        <input matInput type="text" placeholder="Test1">
      </mat-form-field>
    </div>
    <div fxFlex="50">
      <mat-form-field class="example-full-width">
        <input matInput type="text" placeholder=" Test2">
      </mat-form-field>
    </div>
  </div>

Answer 1

你可以简单地使用

<br>

示例：

<div class="content pt10" fxLayout="row" fxLayout.xs="column" fxFlexFill>
    <div fxFlex="50">
      <mat-form-field class="example-full-width">
        <input matInput type="text" placeholder="Test1">
      </mat-form-field>
    </div>
    <br>
    <div fxFlex="50">
      <mat-form-field class="example-full-width">
        <input matInput type="text" placeholder=" Test2">
      </mat-form-field>
    </div>
  </div>

或使用css来增加块的边距。见 https://www.w3schools.com/css/css_margin.asp

Answer 2

我看到你使用了 pt10，它会给你顶部 10px 的填充，所以根据这个逻辑，我建议你添加 mb10，这将留下 10px 的边距 space 在你第一次输入的底部。

<div class="content pt10" fxLayout="row" fxLayout.xs="column" fxFlexFill>
<div class="mb10"fxFlex="50">
  <mat-form-field class="example-full-width">
    <input matInput type="text" placeholder="Test1">
  </mat-form-field>
</div>
<div fxFlex="50">
  <mat-form-field class="example-full-width">
    <input matInput type="text" placeholder=" Test2">
  </mat-form-field>
</div>

Answer 3

<div class="content pt10" fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
        <div fxFlex>
          <mat-form-field class="example-full-width">
            <input matInput type="text" placeholder="Test1">
          </mat-form-field>
        </div>
        <div fxFlex>
          <mat-form-field class="example-full-width">
            <input matInput type="text" placeholder=" Test2">
          </mat-form-field>
        </div>
      </div>

您将使用 fxLayoutGap。如果你想增加间隙将增加 fxLayoutGap=20px 或 30px

如何在输入字段之间制作一个小 space？

How to make a small space between the input fields?

html

css

angular-material

angular-flex-layout