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

因此在我的屏幕上导航栏几乎延伸到了屏幕的尽头，而在更大的屏幕上它没有达到预期的限制我是创建网站的初学者我想请问在这里是什么问题的帮助..我尝试使用宽度的百分比，但是当我让屏幕更小的内容得到所有混乱，我不想我想要一个非响应菜单，如eBay我猜。导航菜单的问题在其他屏幕上看起来更小

.search [type=text]{ 
 
    width: 30em; 
 
\t position:absolute; 
 
\t   top:6%; 
 
\t   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; 
 
    
 
\t 
 
} 
 
.Navigation{ 
 
\t font-family:Arial; 
 
\t font-size:1em; 
 
\t width:80.9em; 
 
\t position:fixed; 
 
\t top:6em; 
 
\t left:2em; 
 
    list-style-type: none; 
 
\t padding:0%; 
 
\t border-bottom: 1px solid grey; 
 
\t border-top: 1px solid grey; 
 
    
 
} 
 

 
.Navigation a { 
 
    float: left; 
 
\t 
 
} 
 

 
.Navigation li a{ 
 
    display: inline-block; 
 
    color: #484849; 
 
    text-align: center; 
 
    padding: 0.7em 4.93em; 
 
\t text-decoration: none; 
 
\t 
 
} 
 

 
.Navigation a:hover { 
 
    border-bottom: 1px solid red; 
 

 
} 
 
/* class="active" */ 
 
.active { 
 
\t border-top: 1px solid red; 
 
    border-bottom: 1px solid red; 
 
\t 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="style.css"/> 
 
\t <style type="text/css"> 
 
\t .logo{ 
 
\t \t position:absolute; 
 
\t \t top:1em; 
 
\t \t left:3em; 
 
\t } 
 
\t 
 
\t </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>

来源

2017-02-25 Alaa

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

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

编辑- 注意到你提到的使用百分比使它在较小的显示器中混乱。您可以使用最小宽度确保您的文本的最小宽度足够。您还可以使用@media查询，它可以让您设置页面的显示尺寸。您可以在这里阅读更多内容 - https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

来源

2017-02-25 19:34:32 Shtut

但这并不意味着我正在创建响应式菜单吗？我不想ebay例如让你调整浏览器的大小，菜单在所有内容都不会改变。 – Alaa

使用百分比会改变宽度，是的。对于你所描述的我将使用@media查询，他们完全满足你的需求:) – Shtut

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

回答

相关问题