我有一个输入元素，旁边有一个按钮元素。
我希望按钮是固定大小（其默认大小），并且输入填充剩余宽度。
我该怎么做呢？
这是我的代码：
<div style="position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
background-color:white;
max-width:500px;">
<input type="text" #message style="height: 50px; float:right;" />
<button mat-fab (click)="newMessage()" color="primary">
<mat-icon>send</mat-icon>
</button>
</div>
</div>
您可以像这样简单地使用 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>也不需要使用浮动属性，您可以使用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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句