導航菜單的問題在其他屏幕上看起來更小

因此在我的屏幕上導航欄幾乎延伸到了屏幕的盡頭，而在更大的屏幕上它沒有達到預期的限制我是創建網站的初學者我想請問在這裏是什麼問題的幫助..我嘗試使用寬度的百分比，但是當我讓屏幕更小的內容得到所有混亂，我不想我想要一個非響應菜單，如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

導航菜單的問題在其他屏幕上看起來更小

回答

相關問題