Question

我正在尝试设置表单，以使文本输入位于一侧，并且两个按钮占据了另一侧，一个位于顶部，另一个位于底部。

我尝试使用br，但这并没有做任何事情。如果重要的话，我也在Angular 7.0上执行此操作。

HTML

<form class="form" (ngSubmit)="onSubmit()">
   <input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
   <input type="submit" value="Submit" class="btn">
   <input type="reset" value="Reset" class="btn">
</form>

CSS

.form {
   display: flex;
}

.form input[type='text'] {
   flex: 10;
   padding: 5px;
   height: 40px;
}

.form input[type='submit'] {
   flex: 2;
   height: 20px;
   display: block;
}

.form input[type='reset'] {
   flex: 2;
   height: 20px;
   display: block;
}

当前，所有三个like this并排。我希望两个按钮相互重叠。

Answer 1

如果您不想更改标记，则可以使用display: grid。

form {
  display: grid;
  grid-template-areas: 'form topbutton' 'form bottombutton'
}

input[type="text"] {
  grid-area: form;
}

input[type="submit"] {
  grid-area: topbutton;
}

input[type="reset"] {
  grid-area: bottombutton;
}

<form class="form" (ngSubmit)="onSubmit()">
   <input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
   <input type="submit" value="Submit" class="btn">
   <input type="reset" value="Reset" class="btn">
</form>

Answer 2

更可靠的解决方案可以使用flexbox：

div.row {
  display: flex;
  width: 100%;
  /* you may add height if you need it */
  /* height: 125px; */
}
div.row > * {
  flex: 1 1 80%;
}
div.row > .buttons {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
}
div.row > .buttons > * {
  flex: 1 1 auto;
}

<form class="form" (ngSubmit)="onSubmit()">
  <div class="row">
    <input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
    
    <div class="buttons">
      <input type="submit" value="Submit" class="btn">
      <input type="reset" value="Reset" class="btn">
    </div>
    </div>
</form>

Answer 3

在您的display: block元素中添加input，以使它们占据新的一行。
您还可以通过将所需元素包装在<div>类（在这种情况下为.left和.right中）中，然后将它们都浮动到left中，将元素分为两列。

这可以在下面看到：

.left, .right {
  width: 50%;
  float: left;
}

.right input {
  display: block;
}

<form class="form" (ngSubmit)="onSubmit()">
  <div class="left">
    <input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
  </div>
  <div class="right">
    <input type="submit" value="Submit" class="btn">
    <input type="reset" value="Reset" class="btn">
  </div>
</form>

Answer 4

我从未使用过Angular，但是之后我通常在HTML中使用两个br，并且效果很好，或者您可以使用css手动更改样式和边距（顶部，左侧等）的每个元素的位置。即：像这样：

 br example:
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input type="submit" value="Submit" class="btn"><br><br>
<input type="reset" value="Reset" class="btn"><br><br>
</form>


  css example:
 <form class="form" (ngSubmit)="onSubmit()">
<input style=margin-top:90px type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input style=margin-top:100px type="submit" value="Submit" class="btn"><br><br>
<input style=margin-top:110px type="reset" value="Reset" class="btn"><br><br>
</form>

将表单元素放在另一行

4 个答案: