Question

我在我的网站上使用了内联导航栏，但是当我缩放窗口时会出现问题，例如，如果我缩小窗口，链接填充将显示在页面的另一侧。如果你将窗口一直缩小到窗口，如果你将鼠标悬停在链接上，它将覆盖顶部的窗口。

li{
	display:inline;
}
ul{
	list-style-type:none;
	margin:0;
	padding:20px 0;
	overflow: hidden;
	background-color:#383a3d;
}
a.list:link{
	font-family: Arial, sans-serif;
	color:white;
	text-decoration:none;
	padding:100% 10%;
}
a.list:hover{
	background-color:black;
	color:white;
	text-decoration:none;
	font-family: Arial, sans-serif;
}
h1.header{
	font-family: Arial, sans-serif;
	text-align:center;
}
body{
	background-color:#f7f7f7;
}
header, footer{
	background-color:#ffab3d;
	padding:30px;
	margin:0;
}
nav{
	position:fixed;
	overflow: hidden;
	width:100%;
	margin:0;
}

<!Doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="Varistyle.css">
	</head>
	
	<body>
		<header><h1 class="header">Varisent</h1></header>
		<nav>
			<ul>
				<li><a class="list" href="#home">Home<a></li>
				<li><a class="list" href="#about">About Us<a></li>
				<li><a class="list" href="#service">Services<a></li>
				<li><a class="list" href="#contact">Contact Us<a></li>
			</ul>
		</nav>
	</body>
</html>

Answer 1

您可以display: flex上的ul和flex-grow: 1上的li使用flex: 1 0 0（简称li{ flex: 1 0 0; } ul{ list-style-type:none; margin:0; padding:20px 0; overflow: hidden; background-color:#383a3d; display: flex; } a.list:link{ font-family: Arial, sans-serif; color:white; text-decoration:none; padding:100% 10%; } a.list:hover{ background-color:black; color:white; text-decoration:none; font-family: Arial, sans-serif; } h1.header{ font-family: Arial, sans-serif; text-align:center; } body{ background-color:#f7f7f7; } header, footer{ background-color:#ffab3d; padding:30px; margin:0; } nav{ position:fixed; overflow: hidden; width:100%; margin:0; }）＆＃＆＃ 39; ll缩放以适合标题的宽度，并缩小而不重叠。

＆＃13;

<!Doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="Varistyle.css">
	</head>
	
	<body>
		<header><h1 class="header">Varisent</h1></header>
		<nav>
			<ul>
				<li><a class="list" href="#home">Home<a></li>
				<li><a class="list" href="#about">About Us<a></li>
				<li><a class="list" href="#service">Services<a></li>
				<li><a class="list" href="#contact">Contact Us<a></li>
			</ul>
		</nav>
	</body>
</html>

＆＃13;

// create an audio context and hook up the video element as the source
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myVideoElement);

// create a gain node
var gainNode = audioCtx.createGain();
gainNode.gain.value = 2; // double the volume
source.connect(gainNode);

// connect the gain node to an output destination
gainNode.connect(audioCtx.destination);

＆＃13;

调整屏幕大小时，我的链接会重叠

1 个答案: