Question

我的输入字段彼此相邻显示。如何使它们显示在彼此下方？

<div class="register-area">
  <h1>Register</h1>
  <form action="" class="register-form">
    <div fxLayout="row" fxFlex.lt-md="column" fxFlexAlign="space-around center">
      <div fxFlex="50" fxFlexOffset="25" class="wrapper">
        <mat-grid-list cols="2">
          <mat-grid-tile class="content">
            <ul>
              <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
              <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
              <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
              <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            </ul>
          </mat-grid-tile>
          <mat-grid-tile style="background-color: red">

            <label><input type="text" matInput placeholder="E-Mail"></label>

            <label><input type="password" matInput placeholder="Password"></label>                

          </mat-grid-tile>
        </mat-grid-list>
      </div>
    </div>
  </form>
</div>

Stackblitz

Answer 1

尝试将输入内容包装在div中

<div style="display: grid">
<input1...>
<input2...>
</div>

Answer 2

在<figure>组件的mat-grid-tile中，设置display: flex和flex-direction: column;

Answer 3

输入和标签元素默认为inline elements，与block elements不同的是，它们仅占据由内容限制的空间。

要解决您的问题，您可以执行以下任一操作：

在输入后添加一个<br/>元素

...
<label><input type="text" matInput placeholder="E-Mail"></label> <br/>
<label><input type="password" matInput placeholder="Password"></label> 
...

将输入元素包装在任何块元素中，最常见的是div

...
<div>
<label><input type="text" matInput placeholder="E-Mail"></label>
</div>
<div>
<label><input type="password" matInput placeholder="Password"></label>
</div>
...

使用CSS将内联元素转换为块元素

...
<label style="display:block"><input type="text" matInput placeholder="E-Mail"></label>
<label style="display:block"><input type="password" matInput placeholder="Password"></label>
...

您可以在上面的链接中了解有关内联和块元素的更多信息，我认为了解这些差异可以帮助您更轻松地构建布局。

如何在另一个下方显示2个输入字段？

3 个答案: