给替换元素input、textarea设置占据一整行

最新推荐文章于 2023-04-18 15:05:01 发布
原创 最新推荐文章于 2023-04-18 15:05:01 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了HTML中input和textarea元素的显示特性，特别是在设置为display:block及width:100%时的行为表现，并讨论了如何解决这些元素在实际布局中出现的溢出问题。

1、input、textarea是行内元素，如果设置了display:block,会发现它所占据的宽度并没有变成父容器的宽度

2、如果设置了width:100%的话，确实会占据一整行，但是再设置margin、border、padding的话，又会溢出


攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
放弃不难，但坚持一定很酷！
03-07 2929
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
input充满整个table表格，input占用的那个表格怎么加长
zhang__1234的博客
01-05 1661
如上图，如果想让上面那个表格长度与下面的绿色方框对齐，修改width="100%"的话不行，结果无变化，需要使用style="width:100%"就行了，不过需要根据图片调节百分比，不一定所有的都是100%。 <input type="text" style="width: 77%;" placeholder="支持QQ号/邮箱/手机号登录"> ...
textarea的宽度设置成与上级标签一样宽
Paul_Huang的Footprint
02-28 8064
利用CSS的WIDTH属性，设置成100% &lt;div style="float:left;width:80%;"&gt; &lt;textarea style="width:100%;"&gt;&lt;/textarea&gt; &lt;/div&gt;
处理layui的input独占一行的问题
热门推荐
qq_36782693的博客
07-18 2万+
1.input标签独占一行，与button标签无法同行显示 （使用position属性进行设置，position属性详见。） 解决方法： 一.对button的position进行设置，使之与input同行。 二.将input与button放在一个大div中，然后将input的div的class定义成layui-inline，button放在独自的div里时也要定义div的class...
textarea怎么占满整个td_高考前20天应该怎么做？全在这里！考生必看干货指南！...
weixin_39889788的博客
11-25 175
高考备考，一半是拼成绩，一半是拼心态，这不仅是对考生的检测，也是对家长的检测。想要在今年七月交出一个满意的答卷，需要考生和家长共同努力，相互配合。那么本期我们就来看看，在这段时期中，考生和家长应如何应对焦躁、紧张等消极情绪以及如何做才能避免被消极情绪打垮。考生篇高三学生在备战高考时的心理活动经历了五个时期，分别是激情期、疲劳烦躁期、否定怀疑期、不自信放弃期和恐惧焦虑期。在备考的最后一个月中，考生所...
解决layui的input独占一行的问题
m0_59820730的博客
04-18 383
当老人未住满天时，需按照日费用进行实际结算
占满屏幕的宽高,当把textarea换成其他标签的时候，怎么才能编辑?
baodaotui4761的博客
04-12 182
$('.nav').width($(window).width()); $('.nav').height($(window).height()); 当把textarea换成其他标签的时候，怎么才能编辑? 在标签中添加 contenteditable="true" 转载于:https://www.cnblogs.com/quitpoison/p/88084...
替换元素与非替换元素
08-27
**块级元素**通常占据一整行，它们自动填满父容器宽度，并且默认情况下，后面的内容会另起一行显示。例如，`<div>`和`<p>`就是典型的块级元素。不过，通过CSS的`float`属性（如`float:left`或`float:right`）或设置`...
css中行内元素和块级元素的区别
09-27
- **块级元素**：会占据整行，它们垂直堆叠，每一行只显示一个块级元素，如`<div>`、`<p>`、`<h1>`至`<h6>`等。块级元素的宽度和高度可以自由设置，margin和padding上下左右均有效。块级元素可以包含行内元素和其他...
<template> <div> <CustomForm :form-data="formData" @submit="handleSubmit"> <template #default> <CustomFormItem label="产品名称" :required="true"> <CustomInput v-model="formData.name" placeholder="请输入产品名称"/> </CustomFormItem> <CustomFormItem label="产品描述" :required="true"> <CustomInput v-model="formData.description" placeholder="请输入产品描述" type="textarea"/> </CustomFormItem> <div class="aaa"> <CustomFormItem label="产品分类" :required="true"></CustomFormItem> <custom-select v-model="selectedOption" @change="handleChange"> <custom-option label="选项一" value="1" /> <custom-option label="选项二" value="2" /> <custom-option label="选项二" value="3" /> </custom-select> </div> </template> </CustomForm> <div>产品名称值: {{ formData.name }}</div> <div>产品描述值: {{ formData.description }}</div> </div> </template> <script setup> import { reactive } from 'vue'; import CustomForm from '@/components/customForm'; import CustomFormItem from '@/components/customFormItem'; import CustomInput from '@/components/customInput'; import customSelect from '@/components/xiala' import customOption from '@/components/xiala/xialaColumn' const formData = reactive({ name: '', description: '' }); // 移除校验规则 // const rules = reactive({...}); function handleSubmit(data) { alert('表单提交! 数据: ' + JSON.stringify(data)); } </script> <style> .aaa{ } </style> 我想要aaa的样式是 让选择框和字在同一行
最新发布
07-17
问题：CustomFormItem和custom-select都是块级元素，默认会占据一整行，所以它们会上下排列。 解决方案： 我们可以通过CSS将`.aaa`设置为flex布局，使其内部的子元素（CustomFormItem和custom-select）在同一行...
前端基础（一） HTML && CSS
weixin_43835305的博客
09-24 298
HTML和CSS基础
前端基础CSS+html篇 2w字吐血总结
chengxuyuanlee的博客
12-30 2373
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
IE8 textarea、input 宽度问题
supershuyun的博客
09-06 813
1.IE8 文本域中滚动条乱跳问题 描述1：前提我们没有给文本域设置宽度，当文本域中的文字超过文本域的高度的时候，会出现滚动条，ie8下当我们将滚动条拉到最下面时候。按回车，滚动条会突然跳至上面或者中间，影响操作。 解决：给文本域指定宽度，即：width:100px; 2.IE8  文本框宽度与其他浏览器不一致问题 描述2：给input设置指定宽度，在ie8下宽度和其他浏览器是不一致的，很...
9.12 多行文本框textarea
mmsx2017的博客
03-13 3322
一、多行文本框textarea简介 单行文本框只能输入一行信息，而多行文本框可以输入多行信息。 多行文本框使用的是textarea标签，而不是input标签。 语法： &lt; textarea rows=”行数” cols=”列数”&gt;多行文本框内容&lt; /textarea&gt; 说明： 在该语法中，不能使用value属性来建立一个在文本域中显示的初始值，这一点跟单行文本框...
testArea中的文字显示为一行，不换行
小黑
11-23 1532
textArea中的文本保存后，在P标签中显示内容，中文显示没问题，英文显示为一行，不进行换行操作。
input textarea 宽度设置100%不超出父元素
weixin_43833851的博客
07-14 1956
<div style="padding-left: 10px;padding-right: 10px;"> <textarea style="width:100%; height:220px;border: 1px solid #F2F2F2;"></textarea> </div> 上述代码，父元素加了padding填充，<textarea> 的width再设置为100% 就会超出div的范围， 即使父元素不加padding填充，由于设置.
html中哪些是行内元素,html行内元素有哪些
weixin_33585152的博客
06-07 1万+
html行内元素有：a、b、u、span、img、input、strong、select、sub、sup、label、em、button、textarea、tt、var、samp、br、cite、code、font、strike等等。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元...
常见html标签：块级元素、行内块级元素、行内元素
sleepy_girl的博客
07-10 792
常见html标签 块级元素：占满整行，元素宽高边距等可设置；（如：div、p 、h1~h6、ul、li、ol、form、table、br） 行内块级元素：不占满整行，元素宽高边距等可设置；（如：img，input，select，button，textarea） 行内元素：不占满整行，宽高、上下边距等不可直接设置；（如：span，i，b，a，strong，s，del） 行内元素可以直接设置...
el-input textarea设置宽高
07-13
可以通过设置el-input和textarea的style属性来设置宽高，例如： <el-input style="width: 200px; height: 100px;"></el-input> <el-textarea style="width: 200px; height: 100px;"></el-textarea>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值