关于设置display:inline-block;宽度等于100

作者: 哆啦C梦的百宝箱 | 来源:发表于2025-03-25 10:23 被阅读0次

之前开发的时候，没有特别注意到

<span>123</span><span>456</span>
//css
span {
  display: inline-block
  :first-child {
      width: 65%
  }
  :last-child {
    width: 35%
  }
}

当按上面写的时候，不会有问题，但是如果代码被格式化，span换位两行展示，就会出现换行的情况。

deepseek的回答

b066a8025ad02f0bb80dc3ec3ddaf5b.png

解决办法
1：使用flex布局
2：使用float,给span加上float

高度塌陷
flost：left 失去宽度 display·：inline-block 失去宽度将元素overflow设置...
高度塌陷
flost：left 失去宽度 display·：inline-block 失去宽度将元素overflow设置为...
CSS世界笔记
当display为block时，不要设置width:100%，display元素的默认宽度就是填充父元素的100%...
什么时候inline-block替换float？
『inline-block是什么？ Inline-block是元素display属性的一个值。display设置这...
CSS 让DIV被内部元素撑开的方法
比如有一个DIV没有设置高度和宽度，想让内部元素把它撑开，在样式里加入： display: inline-block;
小程序基础知识
display属性 display属性可设置值有：block,inline,inline-block,none. ...
css 单、多行文本超出转省略号
单行： display: inline-block; width: 100%; /* a */ white...
页面布局需要牢记的常识
定位问题中的display display 为 block 时，默认宽度是100%，一旦我们将它设置为 inlin...
CSS3盒子相关样式
display:inline-block 内联但是可以设置宽高。 display:inline-table dis...
css布局
相关属性 display 块级元素没有设置宽度时，它的宽度是其容器的 100%可以给块级元素设置宽高、内边距、外边...

网友评论

本文标题：关于设置display:inline-block;宽度等于100

本文链接：https://www.haomeiwen.com/subject/dwdcfrtx.html

关于设置display:inline-block;宽度等于100