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 个答案: