我遇到一个问题,即文本字段的帮助文本没有出现在文本字段下方。它出现在最左边。
它实际上应该类似于下图:
我页面的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>
我要去哪里错了?
答案 0 :(得分:1)
您需要将align-items:center;
添加到您的.container
元素中。这将使flex项居中,而无需将其拉伸到flex容器的大小。
或者align-items:flex-start;
和align-items:flex-end;
将flex项目放置在flex容器的开始或结尾。以防万一您正在寻找其他位置。
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>
答案 1 :(得分:-1)
也许您在这里错过了一个点: 如果要转到目录的父目录,请使用..以便如下所示:
并且无需添加此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>
</html>