width:100%在父元素为inline或inline-block下的显示问题
问题提出
当父元素为inline或inline-block时，内部元素设置width:100%会出现不同的显示效果。以代码为例：
测试内容这是inline-block span
效果1：父元素为inline-block，子元素的宽度为父元素的宽度效果2：父元素为inline，子元素的宽度撑开父元素
问题分析
width:100%属性的百分比宽度是相对于父元素的。对于inline-block元素，其父元素的宽度通常是由最近的块级元素或行内块级元素决定。但在inline元素中，其父元素通常是行内元素本身，因此width:100%相对的是行内元素的内容宽度。
在效果2中，父元素为inline，因此子元素的宽度相对于父元素的内容宽度，这导致子元素的宽度撑开父元素。
解决方法
为了解决这个问题，可以为父元素设置明确的宽度，如下所示：
测试内容这是inline-block span
此时，子元素的宽度将相对于父元素的指定宽度计算。
以上就是为什么在父元素为inline或inline-block时，子元素设置width: 100%会出现不同的显示效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632323.html
微信扫一扫 
支付宝扫一扫 
