前端篇（1）- margin在div中无效，在el-input输入框中加入图标以及改变在页面中的位置长度

已于 2022-05-20 17:03:24 修改
阅读量1.1k 收藏 2
点赞数 2
分类专栏： 学习笔记 文章标签： 前端 vue.js css
于 2022-05-20 15:59:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61672548/article/details/124884956
版权

margin在div中无效

在div嵌套div时，子div使用margin会出现无效的情况，这时需要给父div加上边界就行。

border:1px solid;

在el-input输入框中加入图标

使用ElementUI，给前面加图标只需加上prefix-icon="el-icon-user-solid"

如：

<el-input type="password" v-model="ruleForm.pass" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input>

给后面加只需在 el-input 添加 suffix-icon="el-icon-user-solid"

el-input输入框改变在页面中的位置长度

找了半天怎么改el-input输入框的长度，后来发现直接添加style就行。

NoBug.
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
div里的div设置margin没有效果
weixin_45019566的博客
01-03 4745
问题：div里的div设置外边距（margin）没有效果 html <div class="login_box"> <div class="fdiv"> <span>登录</span><span>/注册</span> </div> </div> css &lt...
element给input框加图标
xybhua的博客
12-29 1606
只需要在input中添加一个。只需要在input中添加一个。只需要在input中添加一个。
ElementUI输入框占位文本设置
最新发布
Faiz_DXW的博客
05-30 301
网上查了半天方法，无法生效，自己改一改发现可以用了，效果及代码如下。
Element-Ui组件（二）Icon 图标
热门推荐
究极死胖兽的博客
06-03 24万+
Element-Ui组件（二）图标应用 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库，主要有以下2种用法： 设置类名el-icon-xxx，通常使用i元素 在Element部分组件中设置icon属性 页面效果 以下是通过上述两种用法制作的简单导航工具条： 示例代码 &l...
el-input 内置 icon大小更改
anderson30的博客
05-19 1176
【代码】el-input 内置 icon大小更改。
【css】div 元素相对于父元素水平居中，margin：0 auto无效的问题
qq_17335549的博客
07-28 674
margin css水平居中
ElementUI 图标Icon
爱喝水的qdy的博客
11-17 4万+
目录官方地址使用方法图标集合 官方地址 https://element.eleme.io/#/zh-CN/component/icon 使用方法 直接通过设置类名为 el-icon-iconName 来使用即可。 图标集合 el-icon-platform-elemeel-icon-elemeel-icon-delete-solidel-icon-deleteel-icon-s-t...
可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
02-28
在前端开发中，Element UI 的 el-tree 组件是一款常用的数据展示组件，尤其在构建具有层级结构的数据时。本文将深入探讨如何对 el-tree 进行样式功能修改，包括更换图标（icon）、实现输入框可编辑以及调整下拉展开...
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
11-26
在上面的模板中，我们使用了 Element-UI 的 `el-row` 和 `el-col` 组件来构建网格布局，并创建了上传图片的输入框以及裁剪预览区域。同时，我们还定义了一些旋转按钮，用户可以通过点击这些按钮对图片进行旋转操作。...
点击文本框中按钮弹出日期
09-17
"><input name="text" type="text" class="Input" id=showdate /></div><div style="margin-left:-20px; margin-top:4px; width:20px; float:left; z-index:1000;"> <input name="image" type="image" id=...
js代码-学习vue
07-15
当你在输入框中输入文字时，`message`的值会实时更新，同时在页面上显示的内容也会随之改变。 指令是Vue中预定义的行为增强，如`v-if`、`v-for`、`v-bind`和`v-on`等。`v-if`用于条件渲染，`v-for`用于循环遍历数组...
vue-todolist
05-24
Vue.js 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。"Vue-todolist"很可能是基于Vue.js实现的一个简单待办事项列表应用。在HTML、CSS和JavaScript的组合中，这种应用通常用于教学、练习或者快速原型...
关于vue3+版本引入element-ui使用icon问题 （icon不显示问题）vue3中input里面不显示icon图标
11-10 2977
关于vue3+版本引入element-ui使用icon问题 （icon不显示问题）vue3中input里面不显示icon图标
Vue - 实现搜索框获取焦点时下方显示一个 div 容器，点击 input 输入框时底部出现下拉框容器，当失去焦点时底部容器隐藏（仿造类似百度搜索框效果，可做下拉提示搜索或热门推荐等功能）
王佳斌
10-16 1580
vue2，搜索框，element ant design vue2全局搜索框，vue网站网页项目，vue搜索框点击出现下方容器，vue搜索框获得焦点后下方出现div推荐，vue2如何实现点击搜索框时下方出现容器，vue element搜索框激活时底部显示其他内容，vue实现类似百度搜索框功能效果，vue2仿百度搜索框详细教程源码代码，input搜索框获得focus焦点时下方显示额外容器，input输入框获取焦点下面显示内容,失去焦点隐藏内容，vue输入框激活时显示下拉容器，Vue实现input输入框下拉搜索提
【Element-ui】Icon 图标与Button 按钮
m0_62599305的博客
12-02 2万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
element 如何使用自定义icon图标
m0_61702149的博客
07-06 1万+
element 替换自己的小图标，自定义小图标
组织架构图实现——jOrgChart的使用
yehaocheng520的博客
05-29 5925
最近公司需要做一个组织架构图，具体的功能如下： 我这边是做了横向和纵向两种展示方式： 目前这个还不是最终定稿，先不管了，光做这些就花了我好几天的时间了。jq操作dom我已经忘光了。。 步骤1：百度检索，查找orgchart的实例 然后下载实例： 步骤2：实例引用 1.js/css部分的引用 <!-- 引入jq文件 --> <script src="~/Scripts/Common/jquery-1.10.2.js"></script> <script src
el-input内部添加icon
weixin_45832746的博客
03-10 1206
【代码】el-input内部添加icon。
element-ui——二级菜单和顶部导航联动
NanChen的博客
02-14 3101
目前 原本数据结构 const users = [{ id: 1, username: 'normal', password: 'normal', token: 'abcdefghijklmnopqrstuvwxyz', leftMenus: [{ title: '用户管理', key: '/user', name: 'user', icon: 'el-icon-user-solid', rights: ['view', 'edit',
如何用vue把写好的一些标签往el-input输入框里面放，不是放在输入框外，写个详细的例子
06-06
好的，这里是一个将标签放入el-input输入框中的Vue示例： HTML代码： ```html <template> <div> <el-input v-model="inputValue"> <template v-slot:prepend> <div class="tag-group"> <div v-for="(tag, index) in tags" :key="index" class="tag">{{ tag }}</div> </div> </template> </el-input> </div> </template> ``` 在这个示例中，我们使用了Element UI提供的el-input组件，并通过v-model将输入框的值绑定到了Vue实例中的inputValue属性上。 在el-input组件中，我们使用了一个带有v-slot:prepend指令的template标签，用于在输入框的前面放置一些内容。在这个例子中，我们放置了一个包含标签的div容器。 我们使用了v-for指令来遍历Vue实例中的tags数组，并将每个标签渲染为一个div标签。这里使用了:key指令来指定每个标签的唯一标识。 CSS代码： ```css .tag-group { display: flex; flex-wrap: wrap; margin-right: -4px; } .tag { background-color: #f2f2f2; border-radius: 4px; color: #666; font-size: 12px; margin-right: 4px; margin-bottom: 4px; padding: 2px 8px; } ``` 在这个示例中，我们使用了一些CSS样式来美化标签和标签容器的样式。 在.tag-group类中，我们将其设置为一个flex布局，并使用flex-wrap属性使其可以换行。我们还将margin-right属性设置为-4px，以便在标签之间留出一些间距。 在.tag类中，我们设置了标签的背景颜色、圆角、字体颜色、字体大小、内边距和外边距等样式。 JavaScript代码： ```javascript <script> export default { data() { return { inputValue: '', tags: ['Vue', 'Element UI', 'JavaScript', 'CSS', 'HTML'] } } } </script> ``` 在Vue实例中，我们定义了一个inputValue属性来存储输入框的值，并定义了一个tags数组来存储标签的内容。 以上就是一个将标签放入el-input输入框中的Vue示例。通过这个示例，你应该能够理解如何使用Vue和Element UI来实现这个功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

NoBug.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值