Question

如何在输入字段之间留出很小的空间？仅在不使用“角度材质”示例中所示的表格的情况下。

<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，它将使您在顶部填充10像素，因此根据该逻辑，我建议您添加mb10，这将在您的底部保留10像素的空白空间第一次输入。

<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

如何在输入字段之间留出很小的空间？

3 个答案: