移动端设置了overflow:hidden和border-radius，子元素超出部分不隐藏问题？

最新推荐文章于 2023-07-24 11:15:22 发布

weixin_33851604

最新推荐文章于 2023-07-24 11:15:22 发布

阅读量1.1k

点赞数 1

原文链接：https://juejin.im/post/5af930ec6fb9a07ac162894d

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/SB.css" />
		<style type="text/css">
			.main {
				width: 300px;
				height: 100px;
				border: 1px solid red;
				border-radius: 15px;
				overflow: hidden;
				/*transform:rotate(0deg); */
			}
			
			.con {
				display: block;
				overflow: scroll;
				overflow-y: hidden;
				-webkit-overflow-scrolling: touch;
				white-space: nowrap;
				font-size: 0px;
			}
			
			.item {
				width: 100px;
				height: 100px;
				background: green;
				display: inline-block;
				position: relative;
			}
			
			.item:nth-child(2n) {
				background: red;
			}
			.item p{
				width: 50px;
				height: 20px;
				color: white;
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 0px;
				background: blue;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="con">
				<div class="item">
					<p>快点</p>
				</div>
				<div class="item">
					<p>快点</p>
				</div>
				<div class="item">
					<p>快点</p>
				</div>
				<div class="item">
					<p>快点</p>
				</div>
				<div class="item">
					<p>快点</p>
				</div>
			</div>
		</div>
	</body>

</html>
复制代码

PC

移动端

解决办法：

.main {
				width: 300px;
				height: 100px;
				border: 1px solid red;
				border-radius: 15px;
				overflow: hidden;
				transform:rotate(0deg);  /*transform: scale(1);也可以*/
			}
复制代码

weixin_33851604

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端设置了overflow:hidden和border-radius，子元素超出部分不隐藏问题？

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width,initial-scale
复制链接

扫一扫