代码之家 › 专栏 › 技术社区 › Anthony Kong

为什么材料设计的输入尺寸不受封闭div的限制?

material-design

Anthony Kong · 技术社区 · 7 年前

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

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

输入在 div

然而,输入只是扩展并占据了整个宽度。

为什么?

代码:

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

1 回复 | 直到 7 年前

Mateus Martins 7 年前

尝试在materialize中使用可显示的列布局:

<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

推荐文章

coder-guy · 如何在角度应用程序中添加材质工具栏?

3 年前

Infii · 带有自定义数据模板的水平ListView

7 年前

ton1 · 如何添加borderTop以反应材质UI表?

7 年前

Demonic218 · 在Android中实现材质设计时出错

7 年前

Jus10 · 弗利特:你如何让卡片可以点击?

8 年前

Marko Zadravec · 带选项卡的引导导航

8 年前

James · 全宽材质UI网格无法正常工作

8 年前

HovSky · jQuery选项卡检查类未检查类

8 年前

Marko Zadravec · 更改django材质库中的选定颜色

8 年前

Geeta · 选定选项上未显示图像

8 年前