Angular4+Material实现输入框与图标同行及表单布局问题

嘿，我来帮你搞定这两个表单布局的小问题！

问题1：姓名输入框未占满整行 #

原因分析 #

你把两个<mat-input-container>放在了同一个<div>里，但这个父div默认是块级元素，而且里面的输入容器默认也是块级，所以它们会上下排列；再加上你的form设置了flex-direction: column，子元素默认不会自动拉伸填满整个表单宽度，导致这一行没有占满。

解决方法 #

给包裹姓名输入框的div添加flex布局，让两个输入容器平分可用宽度：

1. 先在CSS里添加这个样式：

.name-group {
  display: flex;
  gap: 0.5em; /* 可选：给两个输入框之间加一点间距，看起来更美观 */
}
.name-group mat-input-container {
  flex: 1; /* 让每个输入容器自动平分父元素的可用宽度 */
}

2. 然后修改HTML里的姓名输入框容器：

<div class="name-group">
  <!-- Prénom Nom -->
  <mat-input-container>
    <input matInput type='text' placeholder='Prénom' formControlName='firstname' >
  </mat-input-container>
  <mat-input-container>
    <input matInput type='text' placeholder='Nom' formControlName='name' >
  </mat-input-container>
</div>

这样修改后，姓名输入框就会自动填满整行，两个输入框平分宽度啦。

问题2：URL输入框与图标无法同行显示 #

原因分析 #

你犯了两个小错误：

• .urlbio_icon类里写了style: inline-block;，这是语法错误，正确的属性应该是display: inline-block;
• <mat-input-container>默认是块级元素，哪怕图标设置了inline-block，输入框还是会独占一行

解决方法 #

把包裹URL输入框和图标的div改成flex布局，让它们在同一行排列，同时保持垂直居中：

1. 修正并添加CSS样式：

/* 修正之前的语法错误 */
.urlbio_icon {
  display: inline-block;
}

/* 新增URL输入框和图标的父容器样式 */
.urlbio-group {
  display: flex;
  align-items: center; /* 让输入框和图标垂直居中对齐 */
  gap: 0.3em; /* 可选：给输入框和图标之间加一点间距 */
}
.urlbio-group mat-input-container {
  flex: 1; /* 让输入框占满父容器的剩余宽度 */
}

/* 可以去掉之前的固定宽度，让输入框自适应 */
/* .urlbio { width: 350px; } */

2. 修改HTML里的URL部分：

<div class="urlbio-group">
  <mat-input-container class='urlbio'>
    <input matInput type='text' placeholder='Lien biographie' formControlName='urlbio' class='urlbio'>
  </mat-input-container>
  <div *ngIf='(urlToDisplay$ | async) as url' class='urlbio_icon' >
    <a href='{{ url }}' target='urlbio' ><mat-icon>launch</mat-icon></a>
  </div>
</div>

这样修改后，图标就会和URL输入框在同一行显示，而且输入框会自动占满剩余宽度，布局更灵活。

修改后的完整CSS参考 #

.mat-card { 
  width: 450px; 
  margin: auto; 
  margin-top: 50px; 
} 
form { 
  display: flex; 
  flex-direction: column; 
  gap: 0.5em; /* 可选：给表单元素之间统一加间距 */
} 
.cardtitle { font-size: 20px; } 
.mat-input-container { margin-bottom: .3em; } 
.img_portrait { margin-left: auto; margin-right: auto; } 
/* .urlbio { width: 350px; } 去掉固定宽度 */
.urlbio_icon { display: inline-block; }
.name-group {
  display: flex;
  gap: 0.5em;
}
.name-group mat-input-container {
  flex: 1;
}
.urlbio-group {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.urlbio-group mat-input-container {
  flex: 1;
}

内容的提问来源于stack exchange，提问作者JPMous