如何使导航栏适合HTML和CSS中的所有屏幕尺寸？

Question

我想使导航栏中的所有按钮使用百分比设置样式。 这样一来，在不同的分辨率下它看起来就一样。 但是，由于某些原因，当我将百分比应用于相同的按钮时，其中一些会提供不同的结果，并且看起来会更小。 我非常困惑，确实需要帮助，因为这是我的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>

我希望所有按钮的大小均相同，并使用百分比设置样式。 我也希望导航栏只有一个文本行的高度。 请帮忙！

Answer 1

处理响应的最合适方法是利用媒体查询的功能。 通过这种方法，您可以调整导航栏的大小，使其在不同的屏幕上看起来完全一样。 进一步了解MDN上的媒体查询

小费

您可以在小屏幕上的导航栏上隐藏内容，并引入应可切换的侧栏。

Answer 2

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>

是吗？ 如果不是，请画出预期的行为，以便我更好地了解您想要什么

如何使导航栏适合HTML和CSS中的所有屏幕尺寸？

问题描述

2 个解决方案

解决方案1
0 2019-02-17 13:57:37

解决方案2
0 2019-02-17 13:57:58

如何使导航栏适合HTML和CSS中的所有屏幕尺寸？

问题描述

2 个解决方案

解决方案1 0 2019-02-17 13:57:37

解决方案2 0 2019-02-17 13:57:58

解决方案1
0 2019-02-17 13:57:37

解决方案2
0 2019-02-17 13:57:58