使帮助文本显示在 MDC 文本字段下方

Question

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

实际应该是下图这样的：

我的页面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>

我哪里错了？

Answer 1

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

或者 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>

使帮助文本显示在 MDC 文本字段下方

Make Helper Text Appear Below MDC Text field

javascript

html

css

material-design

mdc-components