我在上面创建了三个MDC文本字段和MDC按钮。但是，文本框不能正确呈现。从下图可以看到，右上角和左上角都有空隙。按钮起作用。下面是我的代码：
<script>
[].forEach.call(document.querySelectorAll('.mdc-text-field'),function(el) {
mdc.textField.MDCTextField.attachTo(el);
});
</script>
<form method="POST" action="ingresoDB.php">
<div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField" >
<input class="mdc-text-field__input" id="cedula" name="cedula">
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label for="cedula" class="mdc-floating-label">Cédula</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<label id="salida" style="color:red"></label>
<br>
<div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" id="nombre" name="cedula">
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label for="nombre" class="mdc-floating-label">Nombre</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<br>
<div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" id="apellido" name="apellido">
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label for="apellido" class="mdc-floating-label">Apellido</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<input type="submit" class="mdc-button mdc-button--outlined" value="Ingresar"
onclick="if(confirm('Grabar estos datos ?')){}else{return false;};" />
</form>
<button class="mdc-button mdc-button--outlined" onclick="window.location.href='principal.html'"> <span
class="mdc-button__ripple"></span>REGRESAR</button>
