滚动条滚动后，背景颜色铺满

最新推荐文章于 2024-06-08 21:17:27 发布

qq_35132189

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量2.4k

点赞数 4

分类专栏：小记文章标签： css

本文链接：https://blog.csdn.net/qq_35132189/article/details/90052991

版权

小记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

解决方法：

1：在外层元素加入css样式
min-width:max-content;
min-width:-webkit-max-content;
案例一：

<!doctype html>
<html>
<head> 
<meta charset="utf-8">
<title></title>
<style>
	div {
	    width: 400px;
	    overflow-x: scroll;  
	    border: 1px solid #e6e6e6;
	}
	ul{
		min-width: max-content; 
	    min-width:-webkit-max-content;
	    padding: 0px;
		margin: 0px;
	}
	li {
	    min-width: 100%;
	    white-space: nowrap;
	    list-style: none;  
	}

	.a{
	    background-color: red;
	}

	.b{
	    background-color: blue;
	}
</style>
</head>
<body>
<div>
    <ul>
        <li class='a'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li class='b'>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
    </ul>
</div>
</body>
</html>

2:在内容元素上加入
display:table-row;
案例二：

<!doctype html>
<html>
<head> 
<meta charset="utf-8">
<title></title>
<style>
	div {
	    width: 400px;
	    overflow-x: scroll;
	    border: 1px solid #e6e6e6;   
	}
	ul{
		padding: 0px;
		margin: 0px;
	}
	li {
	    min-width: 100%;
	    white-space: nowrap;
	    display: table-row; /* or inline-block */
	    list-style: none;   
	}

	.a{
	    background-color: red;
	}

	.b{
	    background-color: blue;
	}
</style>
</head>
<body>
<div>
    <ul>
        <li class='a'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li class='b'>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
    </ul>
</div>
</body>
</html>

qq_35132189

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
滚动条滚动后，背景颜色铺满

解决方法：1：在外层元素加入css样式min-width:max-content;min-width:-webkit-max-content;案例一：<!doctype html><html><head> <meta charset="utf-8"><title></title><style>...
复制链接

扫一扫