Material Design表单输入框标签显示于输入框下方问题求助

嘿，我之前也遇到过AngularJS Material表单的这种布局bug，明明代码抄的示例但就是不对，咱们来一步步搞定它！

首先，这种标签错位的问题大概率不是你写的CSS有问题，而是依赖版本不兼容或者初始化/资源引入不全导致的，当然也可能是布局容器的嵌套冲突。下面是具体的排查和解决步骤：

1. 先确认依赖版本和资源引入 #

AngularJS Material对AngularJS的版本有严格要求，比如：

• AngularJS 1.7.x 搭配 AngularJS Material 1.1.x 是比较稳定的组合
• 同时必须引入 angular-animate 和 angular-aria 这两个依赖模块，Material的很多交互和布局都依赖它们

确保你的页面头部按顺序引入了这些资源：

<!-- AngularJS核心 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<!-- Material依赖模块 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-aria.min.js"></script>
<!-- AngularJS Material样式和脚本 -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.27/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.27/angular-material.min.js"></script>

2. 调整表单布局结构 #

你原来的代码里，布局容器的嵌套有些混乱，比如部分md-input-container没加flex，外层的flex属性可能导致布局挤压。我给你调整了代码，让结构更清晰合理：

<div layout="row" layout-align="center center" class="md-padding">
  <div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2">
    <md-content class="md-padding">
      <div layout="column" layout-align="center stretch" flex>
        <form name="contactForm" ng-submit="sendMail()">
          <!-- 给每个输入容器加上flex，确保垂直布局下均匀分布 -->
          <md-input-container flex>
            <label>Name:</label>
            <input ng-model="contactName" required>
          </md-input-container>
          <md-input-container flex>
            <label>Email:</label>
            <input type="email" ng-model="contactEmail" required>
          </md-input-container>
          <md-input-container flex>
            <label>Message:</label>
            <textarea ng-model="contactMsg" columns="1" md-maxlength="150" required></textarea>
          </md-input-container>
          <!-- 用Material风格按钮替代普通button，样式更统一 -->
          <div layout="row" layout-align="center center" class="md-padding-top">
            <md-button type="submit" class="md-raised md-primary">Send</md-button>
          </div>
        </form>
      </div>
    </md-content>
  </div>
</div>

3. 自定义CSS强制修正标签位置（兜底方案） #

如果上面两步还是没解决，可以用自定义CSS覆盖Material的默认样式，强制把标签放到输入框上方：

/* 初始状态下标签的位置 */
md-input-container label {
  top: 2px;
  left: 16px;
  transform: translateY(0);
  transition: all 0.3s ease;
}
/* 输入框聚焦或有内容时，标签上移 */
md-input-container input:focus + label,
md-input-container input.ng-not-empty + label,
md-input-container textarea:focus + label,
md-input-container textarea.ng-not-empty + label {
  top: -20px;
  font-size: 12px;
  transform: translateY(0);
}

按照这个步骤来，应该就能解决标签错位的问题啦！

内容的提问来源于stack exchange，提问作者Malik Muhammad Bilal Awan