为什么 width:100在 父元素为inline或者inline-block下 如何显示？

作者站长头像
站长
· 阅读数 17

效果1

  <div>
        <div style="height: 100px;">测试内容</div>
        <div style="display: inline-block;border: 1px solid red;padding: 10px;">
            <span style="display: inline-block; border: 2px solid green; width: 100%;background-color: yellow;"> 这是inline-block span</span>
        </div>
    </div>

为什么 width:100在 父元素为inline或者inline-block下 如何显示？

效果2

<div>
        <div style="height: 100px;">测试内容</div>
        <div style="display: inline;border: 1px solid red;padding: 10px;">
            <span style="display: inline-block; border: 2px solid green; width: 100%;background-color: yellow;"> 这是inline-block span</span>
        </div>
    </div>

为什么 width:100在 父元素为inline或者inline-block下 如何显示？

两段代码的区别： 第一段代码的div为inline-block,第二段为inline。

问题 为什么会出现这种不同的效果

b

回复
1个回答
avatar
test
2024-06-24

第二段, 是因为内部的行内块元素设置width: 100%, 这个宽度的百分比是根据父元素中离他最近的块元素或行内块元素计算的, 因为第二段代码离他最近的块或行内块, 是最外层的块元素div, div的宽是body, 因此他的宽也就是body, 而他又是外层行内元素的内容,这也就导致外层的行内元素被撑开, 出现了第二个截图的样子

第二段代码, 将最外层的div的宽设置一下, 行内块的宽设置为50%结果就非常明显了:

<div style="width: 800px; background-color:aqua;">
  <div style="height: 100px;">测试内容</div>
  <div style="display: inline;border: 1px solid red;padding: 10px;">
    <span style="display: inline-block; border: 2px solid green; width: 50%;background-color: yellow;"> 这是inline-block
      span</span>
  </div>
</div>

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容