[英]How to make navigation bar fit all screen sizes in HTML and CSS?
我想使導航欄中的所有按鈕使用百分比設置樣式。 這樣一來,在不同的分辨率下它看起來就一樣。 但是,由於某些原因,當我將百分比應用於相同的按鈕時,其中一些會提供不同的結果,並且看起來會更小。 我非常困惑,確實需要幫助,因為這是我的ICT項目。
我試圖使所有填充物的百分比相同,
HTML:
.topnav{ overflow: hidden; background-color: #333; font-family: courier new; width: 100%; max-height:100px; } .topnav a { float: left; font-size: 16px; color: white; text-align: center; padding: 3% 2%; text-decoration: none; display: flex; margin: auto; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; background-color: inherit; font-family: inherit; margin: auto; } .dropdown a { padding: 3% 2%; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #1A93EE; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }
<div class="topnav"> <div class="dropdown"> <button class="dropbtn">About MUN <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="munpage.html">What is MUN?</a> <a href="munteam.html">The STCMUN Team</a> <a href="munprocedures.html">MUN Procedures </a> </div> </div> <div class="dropdown"> <button class="dropbtn">The UN <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="unpage.html">What is the UN?</a> <a href="unsustainablegoals.html">The UN Sustainable Goals</a> </div> </div> <a href="currentevents.html">Current Events</a> <a href="internationalaffairs.html"> International Affairs </a> <a href="others.html">Others </a> <a href="contactus.html"> Contact Us </a> </div> </div> </div> </div> </div>
我希望所有按鈕的大小均相同,並使用百分比設置樣式。 我也希望導航欄只有一個文本行的高度。 請幫忙!
處理響應的最合適方法是利用媒體查詢的功能。 通過這種方法,您可以調整導航欄的大小,使其在不同的屏幕上看起來完全一樣。 進一步了解MDN上的媒體查詢
小費
您可以在小屏幕上的導航欄上隱藏內容,並引入應可切換的側欄。
body,html {
margin: 0px;
padding: 0px;
}
.topnav{
overflow: hidden;
background-color: #333;
font-family: courier new;
width: 100%;
max-height:100px;
padding: 3% 2%;
}
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
display: flex;
margin: auto;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: auto;
}
.dropdown a {
padding: 3% 2%;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #1A93EE;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<div class="topnav">
<div class="dropdown">
<button class="dropbtn">About MUN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="munpage.html">What is MUN?</a>
<a href="munteam.html">The STCMUN Team</a>
<a href="munprocedures.html">MUN Procedures </a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">The UN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="unpage.html">What is the UN?</a>
<a href="unsustainablegoals.html">The UN Sustainable Goals</a>
</div>
</div>
<a href="currentevents.html">Current Events</a>
<a href="internationalaffairs.html"> International Affairs </a>
<a href="others.html">Others </a>
<a href="contactus.html"> Contact Us </a>
</div>
</div>
</div>
</div>
</div>
</body>
是嗎? 如果不是,請畫出預期的行為,以便我更好地了解您想要什么
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.