MUI框架里的mui-input-row里的label改为button

43 阅读 0 评论 29 点赞

我是靠谱客的博主结实流沙，最近开发中收集的这篇文章主要介绍MUI框架里的mui-input-row里的label改为button，觉得挺不错的，现在分享给大家，希望可以做个参考。

第一周的日子基本就是个小透明啦，前两天一直在看mui框架。前端的框架真的很多，一时也记不住那么多样式。典型的就是记住了这个结构

mui框架挺好上手的，用于移动端App，样式也很好看，能够快速的构建出UI界面。Hbuilder编辑器编写也很快。

公司的小姐姐这两天就让我们p了几个图，其中一个input和button问题，想跟大家分享一下。

mui框架自带的例子中，一般都是label在前，input在后写死了。如果想要在input输入框后面插入一个查询按钮，通常大家写完会是下面这个样子：

这时候就需要我们自己写style样式，覆盖mui.min.css里的样式即可，在<head>标签里加入如下：

这时候input输入框和按钮处于同一行，如下所示：

这时候还没结束，这是带清除按钮的输入框，当自己输入文字时，意外发现清除按钮并没有跟随着输入框的位置改变，出现以下错位：

所以我们要为清除按钮也添加相应的样式：

ok，大功告成！

晚安

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。