問題

私は材料設計を試していますが、ここで何が欠けているのか分かりません。

私はテキスト入力とボタンを使いたい。

入力はdiv内にあります。私は入力サイズが囲むdivによって制限されると予想しました。

この場合、囲むdivの幅を50pxに設定しました。

しかし、入力はちょうど展開され、全幅を占めました。

どうして?

スクリーンショット:

enter image description here

コード:

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

  ベストアンサー

カラムレイアウトをマテリアライズで使用してみてください:

 <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

  同じタグがついた質問を見る

material-design