为什么带有材料设计的输入大小不受封闭的div限制？

Question

我正在尝试材料设计，我不知道这里缺少什么。

我想使用文本输入和按钮。

输入在div之内。我希望输入大小受封闭的div限制。

在这种情况下，我将封闭div的宽度设置为50px。

但是输入只是扩展并占用了整个宽度。

为什么？

屏幕截图：

代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>



<div width="50px" padding="5px">
<input placeholder="Event Name" autocapitalize="off" spellcheck="false" autocomplete="billing email" data-trekkie-id="email_field" data-shopify-pay-handle="true" data-autofocus="true" data-backup="customer_email" aria-describedby="checkout-context-step-one" aria-required="true" class="field__input" size="30" type="text" name="checkout[email]" id="checkout_email"/>
</div>
<a class="waves-effect waves-light btn"><i class="material-icons right">check</i>OK</a>

Answer 1

尝试在实现时使用不合理的列布局：

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>


<div class="row">
<div class="col s5">
<input placeholder="Event Name" autocapitalize="off" spellcheck="false" autocomplete="billing email" data-trekkie-id="email_field" data-shopify-pay-handle="true" data-autofocus="true" data-backup="customer_email" aria-describedby="checkout-context-step-one" aria-required="true" class="field__input" size="30" type="text" name="checkout[email]" id="checkout_email"/>
</div>
</div>
<a class="waves-effect waves-light btn"><i class="material-icons right">check</i>OK</a>

文档链接：https://materializecss.com/grid.html