Question

当我添加中间 div（屏幕截图中的蓝色）时，会出现一个水平滚动条。

我尝试更改main()中的main()，决定使用其他度量单位。

使用example个值和%u个值进行播放。

我是一个初学者，不知道自己在做什么错。请帮助我：）

也许我的代码中的图片有问题？ Screenshot

private fun test_unsafe(obj: Any) {
    obj as Class1
    obj as Interface1

    //obj is now of type <Class1 & Interface1>
}

fun <A> test(obj: A) where A: Class1, A: Interface1 = test_unsafe(obj)

fun testFunction(obj: Any) {
     if (obj is Class1 && obj is Interface1) {
         test_unsafe(obj)
     }
}

Answer 1

只需从正文的CSS中删除width: 100vw;。

其他选择是在身体上使用overflow-x: hidden;。

更新

我认为水平滚动是由于垂直滚动条引起的，所以当您将正文的宽度设置为100vw时，会导致溢出。

考虑到这一点，您可以仅将width: 100vw;设置为max-width: 100%。

body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: hsl(192, 100%, 9%);
}

* {
	box-sizing: border-box;
}

h1, h2 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

p {
	font-size: 18px;
}

button {
	font-family: 'Open Sans', sans-serif;;
	font-weight: 700;
}

/* Header */

header {
	height: 100vh;
	width: 100%;
	background-image: url(./images/bg-hero-desktop.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: hsl(193, 100%, 96%);
}

.container { 
	width: 85%;
	margin: 0 auto;
	padding-top: 3rem;
}

nav {
	display: flex;
	justify-content: space-between;
}

.nav-btn {
	font-family: inherit;
	width: 11rem;
	border-radius: 1.2rem;
	background-color: #fff;
	border: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	outline: none;
}

.main {
	display: flex;
	justify-content: space-between;
}

.main-text {
	margin-top: 8.5rem;
	width: 32rem;

}

.mockups {
	margin-top: 4rem;
	display: block;
	height: auto;
	width: 50%;
}

.main-btn {
	color: #fff;
	background-color: hsl(322, 100%, 66%);
	width: 14.5rem;
	height: 2.8rem;
	border: none;
	border-radius: 1.4rem;
	outline: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	margin: .2rem .4rem;
}

/* Middle */

.middle {
	width: 20%;
	height: 100px;
	background-color: blue;
}

<html>
<head>
	<meta charset="UTF-8">
	<title>Huddle</title>
	<link rel="stylesheet" href="styles.css">
	<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

</head>
<body>
	<header>
		<div class="container">
			<nav>
				<img class="logo" src="./images/logo.svg" alt="">
				<button class="nav-btn">Try It Free</button>
			</nav>
			<div class="main">
				<div class="main-text">
					<h1>Built The Community <br> Your Fans Will Love</h1>
					<p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as engage in genuine discussion.</p>
					<button class="main-btn">Get Started For Free</button>
				</div>
				<img class="mockups" src="./images/illustration-mockups.svg" alt="">
			</div>
		</div>
	</header>
	<div class="middle">
		<div class="grow"></div>
		<div class="conv"></div>
		<div class="users"></div>

	</div>

</body>
</html>

Answer 2

将此添加到CSS

   body {
     overflow-x: hidden;
    }

为什么会出现溢出？

2 个答案: