div里嵌套form被撑开的问题 排版错误

最新推荐文章于 2022-02-24 20:24:02 发布
最新推荐文章于 2022-02-24 20:24:02 发布 · 437 阅读 · 1
文章标签：

#CSS

本文介绍了一种常见的网页布局问题：当在div中加入form元素时可能导致的排版错位现象，并提供了一个简单的解决方案——通过CSS设置form元素的margin和padding为0来修正布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

就是在div里加上一个form之后会将div撑开，导致原有的排版错乱！大概10px左右

那这个时候，只要在css里定义：form{margin:0;padding:0}

虽然简单点，但是也麻烦了一会，记录下来比较好

iteye_15968
关注
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9939
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
前端 基础面试问题汇总
技术改变世界
04-24 1346
1>、html5有哪些新标签？ <article> 标签定义外部的内容（外部内容如blog,news）。 <aside> 标签定义article以外的内容（可用做文章的侧栏）。 <canvas>使用JavaScript在网页上绘制图形图像。 <details> 用于描述某个文档部分的内容。 <sum...
页面中Form标签影响页面样式的原因
weixin_33795743的博客
01-16 739
页面本来是好的，然后加上Form标签然后页面的布局就会有影响！原因在于没有把Form标签的Style属性的margin设为Auto 转载于:https://blog.51cto.com/smile1314/764547...
html6_from_div_span表单_标签嵌套规则
surly
12-07 897
form表单 form标签 <form action="表单要提交的路径" method="post/get"> </form> get请求方式 1. 会把请求参数放在url后面 2. 速度相对快 3. get请求相对不安全 4. get一般用于查询或者删除操作 5. 可以传送的数据比较小 post请求方式 1. 会把请求的参数放到请求体里 2. 速度相对get要慢 3. post相对安全 4. post请求一般用于修改或者添加操作 5. 可以传送
Form表单里面有内嵌的div，无法获取到表单值
q1054007919的博客
02-10 1964
<Form.Item {...layout} > <div className='unitName_style'> <span className="ant-input-group-addon"> <Iconfont type="icon-bumenguanli"/> </span> <Form.Item name="roleId" rules={[{requ..
解决form表单高度被撑大方案
路在何方
10-09 4618
在网页制作过程中由于需要使用表单提交，因此form用的就会多了，目前网页多数都是采用div+css方式来进行布局架构,因此form经常会把div高度撑大,影响页面美观程度。 　　通常的form解决办法都是使用table来放置表单，将form放到表格的与之外之内，这样一来问题就解
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3513
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
HTML5andCSS3面试题大全
donglize521521的博客
03-08 6079
文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引
前端部分基础知识(html + css)
Horizonar的博客
11-16 800
前端部分知识复习 HTML <!-- 1.文本格式化标签 --> <!-- 1.加粗 strong更加强烈--> 我是<strong>加粗</strong>效果 我也是<b>加粗</b>效果 <!-- 2.倾斜效果 --> 我是倾斜效果 我也是<i>倾斜</i>效果 <!-- 3.删除效果 --
form表单在div中的显示问题
goodboy_hu的专栏
04-25 4145
我的页面是几个div组成的： (1) 　　姓名 　　 　　 (2) ..... 本来我的（1）（2）页面显示是一个整体，但是我在(1)的div之间加了一个form表单，IE7中显示（1）（2）之间就出现一个空白间隙。火狐中没问题。 后来如下解决： 　　对元素的margin和padding各浏览器初始值不一样，设定好就不会有状况了，加个form {margi
HTML中加入form后样式出现混乱
weixin_43981813的博客
02-08 1654
问题：HTML写好之后，进行编写form提交时，好好的样式出现混乱现象，如图 解决：把放到提交参数的前一项，而位置不变。 正确代码： <body> <div id="add_main_div" class="add_main_div"> <div id="head_div" class="head_div"> <p class="h...
div里面嵌套form表单失效的问题
weixin_30709809的博客
03-11 1923
今天项目中一个弹窗的关闭失效了，js和后台都没有报错，找了好久非常纠结，最后将代码一点点删除，然后逐步定位，最终确定是form的问题，将form删除掉就可以了。 但是删除form并非解决问题之道，经过反复试验和同事指点下，将form表单放到最外层就可以了。 不明白为啥div嵌套form会造成div失效，不过以后千万要记得将form尽量写到外层。 转载于:https://www.cnblogs....
div中的table内容过多时不超出div的范围解决方法
热门推荐
直到世界的尽头
09-25 2万+
问题描述：     在做界面展示时，table的内容过多，超出div的大小，看着table的边框盖过了div的边框，不美观。 问题解决：     因为页面整体的布局美工都设计好了，使用公共的css文件，所以自己改的时候只能在jsp中重新定义，在这儿定义table的属性，table-layout:fixed;，然后定义table中td的属性，overflow:hidden;text
【CSS】对于超出div部分的处理
编程记录，亲测有效
04-25 7668
一个正常的前端攻城狮，一般情况不会把内容布置到div外面，但是如果这部分的内容，是用户输入的，然后是从数据库中取出来的，那样有内容超出div部分也是很正常的，尤其是这部分内容，是用户通过编辑器编辑的，便有可能出现这样的情况： 比如，限制一个宽350px，高100px的表格，用户用编辑器设置了一个400px x 400px的表格，就会溢出。
form里面可以嵌套form元素嘛
最新发布
01-16
### HTML `form` 元素嵌套规则 HTML 中不建议也不允许 `<form>` 元素相互嵌套。根据 W3C 的严格嵌套约束，任何违反此规定的做法都会导致浏览器解析错误[^5]。 #### 正确使用 `form` 元素的方法 为了确保表单功能正常并遵循最佳实践，在设计网页时应避免将一个 `<form>` 放置在另一个 `<form>` 内部。如果确实存在多个逻辑上独立的数据提交需求，则应该分别为这些部分创建单独的 `<form>` 结构： ```html <!-- 错误示范 --> <form action="/submit-first-form"> <!-- 表单项... --> <form action="/submit-second-form"> <!-- 另一组表单项... --> </form> </form> <!-- 推荐方式 --> <div> <form action="/submit-first-form"> <!-- 表单项... --> </form> <form action="/submit-second-form"> <!-- 另一组表单项... --> </form> </div> ``` 当涉及到复杂布局或样式调整时，可以通过 CSS 和 JavaScript 来实现视觉上的分组效果而不影响实际 DOM 树结构中的表单元素关系。 另外值得注意的是，虽然不能直接嵌套两个 `form` ，但是可以在同一个父容器下拥有多个兄弟级联形式存在的 `form` 。这样做不仅符合标准而且有助于提高用户体验和可访问性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值