因此，在我的屏幕上，导航栏伸展到屏幕的末端，而在较大的屏幕上，它无法达到预期的限制，我是创建网站的初学者，所以我''d想要在这里的问题上寻求帮助。.我尝试使用宽度百分比，但是当我使屏幕较小时，内容会得到所有混乱，我不想要我想要一个像eBay这样的无响应菜单猜测。
.search [type=text]{
width: 30em;
position:absolute;
top:6%;
left:15%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 1em;
background-color: white;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.Navigation{
font-family:Arial;
font-size:1em;
width:80.9em;
position:fixed;
top:6em;
left:2em;
list-style-type: none;
padding:0%;
border-bottom: 1px solid grey;
border-top: 1px solid grey;
}
.Navigation a {
float: left;
}
.Navigation li a{
display: inline-block;
color: #484849;
text-align: center;
padding: 0.7em 4.93em;
text-decoration: none;
}
.Navigation a:hover {
border-bottom: 1px solid red;
}
/* class="active" */
.active {
border-top: 1px solid red;
border-bottom: 1px solid red;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
.logo{
position:absolute;
top:1em;
left:3em;
}
</style>
</head>
<body>
<a class="logo" href="index.php"><img src="logo.png" alt="logo Icon" height="80"></a>
</body>
<div class="wrapper">
<ul class="Navigation">
<li><a href="Mobiles.php">Mobiles</a></li>
<li><a href="Vehicles.php">Vehicles</a></li>
<li><a href="Games.php">Games</a></li>
<li><a href="Clothes.php">Clothes</a></li>
<li><a href="Accessories.php">Accessories</a></li>
<li><a href="Other.php">Other</a></li>
</ul>
</div>
<form class="search">
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
</html>看起来您已经将NAVBAR的宽度设置为width:80.9em;
em是一个测量单位，是" 1 m特征的宽度"因此，基本上，您将宽度设置为80.9 m的宽度。如果您希望它是百分比，则应使用width: 80%这将使中殿占据父母Div宽度的80％。
编辑 - 注意到您提到的使用Percetage会使其在较小的显示器中混乱。您可以使用最小宽度来确保最小宽度足以容纳文本。您还可以使用@Media查询，该查询使您可以设置页面如何查看不同的显示大小。您可以在此处阅读更多信息-https://www.w3schools.com/cssref/csss3_pr_mediaquery.asp