使元素填充空间

Question

我有一个输入元素，旁边有一个按钮元素 我希望按钮是固定大小（默认大小），以及填充剩余宽度的输入。

我该怎么做？

这是我的代码：

second

Answer 1

您可以像这样使用flex：

div {
  display: flex;
}

input {
  flex: 1; /* this will make the input to take the remaining space*/
}

<div style="position: fixed;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background-color:white;
      max-width:500px;">
  <input type="text" style="height: 50px;" >
  <button mat-fab (click)="newMessage()" color="primary">
          <mat-icon>send</mat-icon>
        </button>
</div>

也不需要使用float属性，可以使用order属性控制位置。

上面的代码显示按钮右侧和下方的按钮位于左侧：

div {
  display: flex;
}

input {
  flex: 1; /* this will make the input to take the remaining space*/
  order:1;
}

<div style="position: fixed;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background-color:white;
      max-width:500px;">
  <input type="text" style="height: 50px;" >
  <button mat-fab (click)="newMessage()" color="primary">
          <mat-icon>send</mat-icon>
        </button>
</div>