Question

因此，在我的屏幕上，导航栏几乎延伸到我的屏幕的末端，而在更大的屏幕上，它没有达到我创建网站的初学者的预期限制，所以我喜欢请问这里有什么问题的帮助..我尝试在宽度上使用百分比但是当我使屏幕变小时，内容变得混乱，我不想要我想要一个像ebay那样的无响应菜单我猜

＆＃13;

.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;
	
}

＆＃13;

<!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>

＆＃13;

Answer 1

看起来您已将导航栏的宽度设置为width:80.9em;

em是一个测量单位，是'1 M字符的宽度' 所以基本上你将宽度设置为80.9 M宽。如果您希望它是百分比，则应使用width: 80% 这将使navebat占父母div宽度的80％。

编辑 - 注意到你提到使用百分比使它在较小的显示器中混乱。您可以使用最小宽度来确保您的文本的最小宽度足够。您还可以使用@media查询，它可以设置页面在不同显示大小下的显示方式。您可以在此处阅读更多信息 - https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

导航菜单在其他屏幕上看起来较小的问题

1 个答案: