输入标题显示在 Material Design 表单中的输入字段下方答案

【问题标题】：Input title is shown below input fields in Material Design form输入标题显示在 Material Design 表单中的输入字段下方
【发布时间】：2018-11-06 18:00:16
【问题描述】：

标题显示在输入字段下方 css 很好，但仍然面临问题我只是从https://www.bossable.com/1745/angularjs-material-design-contact-form/复制示例代码

<div flex layout="row" layout-align="center center">
    <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 flex-sm="100" flex-gt-sm="80" layout-sm="column">
                <form name="contactForm" data-ng-submit="sendMail()">
                    <md-input-container>
                        <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>
                        <label>Message:</label>
                        <textarea ng-model="contactMsg" columns="1" md-maxlength="150" required></textarea>
                    </md-input-container>

                    <button type="submit">Send</button>
                </form>
            </div>
        </md-content>
    </div>
</div>

【问题讨论】：

but still facing the issue 什么问题？你还没有问过问题
你能提供 plunkr 或任何其他演示链接吗？

标签： css angularjs material-design angular-material

【解决方案1】：

尝试添加一个占位符，例如 <input type="email" ng-model="contactEmail" placeholder="Email:" required>

【讨论】：

【解决方案2】：

将<button> 元素替换为<md-button> 指令：

<div flex layout="row" layout-align="center center">
    <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 flex-sm="100" flex-gt-sm="80" layout-sm="column">
                <form name="contactForm" data-ng-submit="sendMail()">
                    <md-input-container>
                        <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>
                        <label>Message:</label>
                        <textarea ng-model="contactMsg" columns="1" md-maxlength="150" required></textarea>
                    </md-input-container>

                    ̶<̶b̶u̶t̶t̶o̶n̶ ̶t̶y̶p̶e̶=̶"̶s̶u̶b̶m̶i̶t̶"̶>̶S̶e̶n̶d̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
                    <md-button type="submit" class="md-primary"
                        ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid) }"
                        aria-label="Send">Send</md-button>
                </form>
            </div>
        </md-content>
    </div>
</div>

有关详细信息，请参阅AngularJS Material <md-button> API Reference。

【讨论】：