使帮助文本出现在 MDC 文本字段下方答案

【问题标题】：Make Helper Text Appear Below MDC Text field使帮助文本出现在 MDC 文本字段下方
【发布时间】：2019-07-08 22:14:45
【问题描述】：

我遇到了一个问题，即文本字段的帮助文本未出现在文本字段下方。它出现在最左边。

实际上应该如下图：

我的页面的 HTML 和 CSS 如下：

html, body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.container {
  display: flex;
  flex-direction: column;
}

.container > div {
  padding: 10px;
}

.button-container button {
  margin-right: 30px;
  margin-top: 10px;
}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Auth.X</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="./employment.css">
</head>

<body>

<div class="container">
    <div class="test-container">
        <div class="mdc-text-field mdc-text-field--outlined test">
            <input type="text" id="tf-outlined-test" class="mdc-text-field__input">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label for="tf-outlined-test" class="mdc-floating-label">Test Field</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
        </div>
        <div class="mdc-text-field-helper-line">
            <div class="mdc-text-field-helper-text">helper text</div>
        </div>
    </div>

</div>

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<script>
    mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field.mdc-text-field--outlined.test'));

</script>

</body>

我哪里错了？

【问题讨论】：

标签： javascript html css material-design mdc-components

【解决方案1】：

您需要将align-items:center; 添加到您的.container 元素中。这会使弹性项目居中，而不会将它们拉伸到弹性容器的大小。

或者align-items:flex-start; 和align-items:flex-end; 将弹性项目定位在弹性容器的开始或结束。以防万一您正在寻找不同的定位。

html, body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.container {
  display: flex;
  flex-direction: column;
  align-items:center;
}

.container > div {
  padding: 10px;
}

.button-container button {
  margin-right: 30px;
  margin-top: 10px;
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Auth.X</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="./employment.css">
</head>

<body>

<div class="container">
    <div class="test-container">
        <div class="mdc-text-field mdc-text-field--outlined test">
            <input type="text" id="tf-outlined-test" class="mdc-text-field__input">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label for="tf-outlined-test" class="mdc-floating-label">Test Field</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
        </div>
        <div class="mdc-text-field-helper-line">
            <div class="mdc-text-field-helper-text">helper text</div>
        </div>
    </div>

</div>

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<script>
    mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field.mdc-text-field--outlined.test'));

</script>

</body>

【讨论】：

不，那行不通。如果它对你有用，你可以发布完整的 CSS