当块级元素含有行内元素时，不被包含在区域内的解决办法

最新推荐文章于 2025-05-13 15:35:22 发布
最新推荐文章于 2025-05-13 15:35:22 发布
阅读量566 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/like_jack/article/details/80695558
本文介绍了解决inline-block元素不在阴影内的布局问题的方法。通过调整元素显示模式为block，可以确保label与select等元素被正确包含在阴影效果中。此外，文章还提到对于包裹在div内的图片出现类似问题时，同样可以通过转换img显示模式为block来解决。

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

上图




解决方法将inline-block换为block，不让其有行内元素就会将 label与select包含在阴影内。

有时包裹在div内的图片也会存在这种情况，将div内的img转为block就ok了，因为他们的盒模型不一样。



H264、H265、H266、AV1编码标准技术全面总结
世界那么大，我想去看看～【偶尔更新，看世界去了😄】
11-23 3662
H264、H265、H266、AV1编码标准技术全面总结
行内块级元素_CSS:BFC（块级格式化上下文）
weixin_39866867的博客
12-08 178
BFC(Block formatting context)直译为"块级格式化上下文"。元素的显示模式我们前面讲过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。那些元素会具有BFC的条件不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC.大家有么有发...
[html] 块级元素不能包含其他块级元素有那些？
歌谣的博客
04-12 1102
[html] 块级元素不能包含其他块级元素有那些？ 嵌套规则： 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 块级元素不能放在p里面。 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt li内可以包含div，p标签中不能有div 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
HTML P不能包含块级元素（包括自身）
weixin_34245169的博客
03-05 196
abcc项目中碰到的，在一个表单中用P包含一个label和div，从Firebug中看html结构div却跑到P外面去了。甚是诧异，原来P元素是不能包含块级元素（包括P自身）的。 The P element represents a paragraph. It cannot contain block-level elements (including P itself).  以下是htm...
块级元素和行内元素的区别
热门推荐
gao_zhennan的博客
03-26 1万+
无论是初学者或者是即将面试的前端工程师，行内元素及块级元素都是非常重要的知识点，在布局设置宽高和边距时经常由于混淆行内元素及块级元素出现问题。 一、显示元素 （一）块级元素 div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre HTML5：header、section、article、footer等等，还...
问答题：默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
zpfnext的博客
09-29 1043
◇ display:block/table;div、h1、table、ul、ol、p等 ◇ display:inline/inline-block;有span、img 、input、button等
CSS3 选择器完全指南：从基础到高级的元素定位技术
最新发布
读心悦
05-13 1080
CSS3选择器提供了从基础到高级的元素定位技术，帮助开发者精准控制页面样式。基础选择器包括元素选择器、ID选择器、类选择器和属性选择器，分别通过标签名、ID、类名和属性值匹配元素。复合选择器如后代选择器、子元素选择器、相邻兄弟选择器等，允许构建更复杂的匹配规则。伪类选择器基于元素状态（如链接状态、用户交互状态）进行动态匹配，而伪元素选择器如::before和::after则用于在元素内容前后插入生成的内容。这些选择器组合使用，能够实现灵活且高效的样式控制，提升页面的可维护性和用户体验。
CSS知识点总结【二】——个人笔记(仅供参考~v~)
m0_50785976的博客
04-16 242
CSS知识点：浮动、背景、选择器、伪元素和伪类
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7214
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS布局技巧及盒模型解析
本章节将介绍CSS布局的基础知识，包括块级元素与行内元素、布局单位的介绍以及常用的布局技巧如盒模型、浮动和定位等。 ## 1.1 什么是CSS布局 在网页中，CSS布局指的是通过CSS样式定义页面中元素的排列和布局方式...
行内元素 块级元素之间的嵌套
weixin_30888027的博客
05-20 864
默认的span标签是一个行内标签，页面构成时，尽量把它作为最后一个标签。 当然不绝对，你可以在内套用同是行内标签的元素：<i>、<span>、<em>。。。等等等。 如果套用块状标签，那么很多情况浏览器解析会把它放到span的外面，w3c内明确标识了，行内元素不可以套用块状元素。 1 如果不按照HTML规则书写代码时，浏览器就...
块级元素、行内元素、行内块元素
AnnGreen的博客
07-24 266
4、设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效（在开发者工具中会看到盒子模型的margin、padding，但是你在行内元素下方或上方加一个块级元素就会发现上下padding-top/bottom和margin-top/bottom都没有效果；5、给行内元素设置了定位时，行内元素的margin、padding是有效果会影响定位的（当然此时的top、left都会影响）form–交互表单。...
CSS中的块级元素、内联元素（行内元素）
weixin_38404507的博客
08-13 262
Block element 块级元素 顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用 的、、默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后 面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有 此功能。 Inline element 内联元素 ...
行内元素 、块级元素 、行内块元素
weixin_45233667的博客
03-07 456
行内元素 、块级元素 、行内块元素 区别 行内元素 无论内容多少,总是独占一行 设置宽高无效 对margin仅设置左右方向有效，上下无效;padding设置上下左右都有效 不会自动进行换行 行内元素只能容纳文本或者其他行内元素 块级元素 能够识别宽高 margin和padding的上下左右均对其有效 可以自动换行 多个块状元素标签写在一起，默认排列方式为从上至下 行内块元素 不自动换行 能够识别宽高 默认排列方式为从左到右 相互之间转化 display:inline : 转换为行内元素 dis
记一次：行级元素不在块级元素内展示，已解决但不清楚原因
a973183827的博客
06-14 160
html
块级元素包含的块级元素margin有空隙问题
darkCloudss的博客
05-31 546
块级元素包含的块级元素margin有空隙问题 在父元素中加font-size：0；即可 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能...
CSS中的行内元素
syl2850246的博客
10-04 257
在CSS中的行内元素特点: 1.宽高是包裹内容的，不内直接修改，就算修改了，也没有效果 2.它的左右外边距是可以修改的，但是上下外边距修改是没有效果的 如果使用外边距居中的样式也是没有效果的 ...
CSS之BFC（块级格式化上下文）
weixin_44722346的博客
10-19 312
在CSS中，页面中任何一个元素都可以看成是一个盒子。 在普通文档流( normal flow)中，盒子会参与一种格式上下文( formatting context)这个盒子可能是块盒子( block- levelbox)，也可能是行内盒子( inline- evel box)。一个盒子只能是块盒子或者是行内盒子，不能同时是块盒子又是行内盒子。其中块盒子参与BFC(块级格式上下文)，行内盒子参与IF...
块级元素、内联元素学习笔记
adeyi的专栏
11-09 691
1、页面渲染是按照文档流来渲染的，yi
深入解析CSS中的块级元素与行内元素
开发者可以通过`display`属性灵活地在块级和行内元素之间切换，以满足不同的设计需求。 行内元素就像是文本中的单词，它们可以紧挨着出现在同一行内，而块级元素则类似于段落，如果不特别指定，它们会在页面上单独...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值