个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:16:36 25 4
gpt4 key购买 nike

所以在我的屏幕上，导航栏几乎延伸到屏幕的尽头，而在更大的屏幕上，它没有达到预期的限制我是创建网站的初学者，所以我想寻求帮助这里的问题是什么.. 我尝试使用宽度百分比但是当我缩小屏幕时内容变得困惑我不想要我想要一个像 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>

最佳答案

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

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

编辑-注意到您提到使用 percetage 会使它在较小的显示器中困惑。您可以使用 min-width 来确保您的最小宽度足以容纳您的文本。您还可以使用 @media 查询来设置页面在不同显示尺寸下的显示方式。您可以在此处阅读更多信息- https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

关于html - 导航菜单在其他屏幕上看起来较小的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42460603/

25 4 0
文章推荐： javascript - 给一个html元素添加一串html属性
文章推荐： c++ - 用于极端图像缩小的快速、高质量像素插值
文章推荐： html - 使用 Jekyll 创建自定义主页
文章推荐： javascript - 在不更改子元素的情况下更改元素的文本