当前位置: 首页 > Web前端 > CSS

解决div出现横向滚动条,背景色不饱满的问题

时间:2023-03-30 15:54:27 CSS

问题描述(如图):div等块级元素默认宽度为100%。页面呈现后,其宽度已固定。这时候,如果文字超过了它的Width(比如调用api后显示的结果),如果我们想要出现滚动条,超出原来宽度的部分背景可能会和文字背景不一样。如图:1、初始情况2、点击菜单后出现的文字长度超过了原来div的宽度,出现了滚动条(注意只有溢出时才会出现滚动条:scroll已设置,如果设置为隐藏,超过宽度的文字会被隐藏)3、向右拉动滚动条,发现背景没有被覆盖。解决方法:给最外层的div加上样式:min-width:max-content;最小宽度:-moz-max-content;注意:注意是min-width而不是width,否则可能会出现其他错误。解决后的样子: