Angular Material：如何将3个输入字段排列在一行？

嘿，我之前也踩过类似的坑！咱们一步步排查下问题所在，大概率是几个常见的细节没处理到位：

• 确认layout="row"的作用对象
  很多UI框架里，layout="row"是给容器元素用的，得把三个元素都包在这个容器里，而不是给每个元素单独加属性。举个正确的写法例子：

  <!-- 正确：容器承载行布局，内部元素自动排列 -->
  <div layout="row">
    <input type="text" placeholder="元素1">
    <input type="text" placeholder="元素2">
    <input type="text" placeholder="元素3">
  </div>
  

  要是你给每个元素单独加layout="row"，那它们还是会各自占一行，完全起不到同行的作用。

• 检查元素的display属性是否被默认样式覆盖
  就算容器开了行布局，如果单个元素是display: block（很多表单元素默认就是这个），还是会占满整行。你可以给每个元素加上display: inline-block，或者用flex布局的flex: 1来分配宽度：

  .inline-item {
    display: inline-block;
    width: 30%; /* 按需调整，留一点间隙避免溢出 */
    margin-right: 2%;
  }
  

  把三个元素都加上inline-item类，再配合容器的行布局，基本就能实现同行排列了。

• 排查全局样式的冲突
  有时候自己写的全局CSS或者框架默认样式，会给表单元素加width: 100%，直接把元素撑满整行。这时候可以用浏览器开发者工具（按F12）选中元素，看看Styles面板里的width属性，然后手动覆盖：

  .inline-item {
    width: auto !important; /* 或者设固定/百分比宽度 */
  }
  

• 调整元素宽度适配三个元素同行
  你参考的“title和email同行”写法，可能是因为两个元素的宽度加起来刚好适配容器。换成三个元素的话，得把每个元素的宽度调小，比如原来两个元素各占48%，三个的话可以各占31%左右，留一点margin或者padding的间隙。

如果还是搞不定，把你的代码片段贴出来，我帮你精准定位问题！

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