调整屏幕大小时，HTML导航栏下拉框内容未正确调整大小
在我的CSS代码中，当屏幕宽度改变时，导航栏框会调整大小，当屏幕小于600像素时，导航栏框也会调整大小。下拉框和内容也会像导航栏框一样调整大小，但是，内容的大小调整不正确。调整屏幕大小时，下拉内容略小于下拉框，但当屏幕小于600px时，下拉内容会变大 我曾尝试使下拉内容的宽度与框的宽度相同，但是，这没有任何影响。我尝试了所有与内容相关的类。他们都没有影响任何事情 注意：我更改了背景颜色，以便您可以看到内容与下拉框本身的宽度不同调整屏幕大小时，HTML导航栏下拉框内容未正确调整大小,html,css,Html,Css,在我的CSS代码中，当屏幕宽度改变时，导航栏框会调整大小，当屏幕小于600像素时，导航栏框也会调整大小。下拉框和内容也会像导航栏框一样调整大小，但是，内容的大小调整不正确。调整屏幕大小时，下拉内容略小于下拉框，但当屏幕小于600px时，下拉内容会变大 我曾尝试使下拉内容的宽度与框的宽度相同，但是，这没有任何影响。我尝试了所有与内容相关的类。他们都没有影响任何事情 注意：我更改了背景颜色，以便您可以看到内容与下拉框本身的宽度不同 正文{ 背景颜色：蓝色； } p{ 颜色：白色； 字体大小：20p
正文{
背景颜色：蓝色；
}
p{
颜色：白色；
字体大小：20px；
显示：内联；
填充：20px；
字体系列：arial；
}
navbar先生{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：rgb（10,10,10）；
排名：0；
}
navcont先生{
保证金：0；
位置：相对位置；
浮动：左；
}
.navcont a、.dropbtn{
保证金：0；
位置：相对位置；
显示：块；
颜色：白色；
字体大小：20px；
文本对齐：居中；
填充：5vh 7vw；
文字装饰：无；
右边框：1px实心rgb（50,50,50）；
左边框：1px实心rgb（50,50,50）；
}
.导航控制a:悬停{
过渡时间：0.3s；
背景色：rgb（30,30,30）；
}
.导航控制a：激活{
背景色：rgb（9194,36）；
}
.粘的{
位置：粘性；
职位：-网络工具包粘性；
排名：0；
z指数：3
}
.dropdown:悬停.dropbtn{
过渡时间：0.3s；
背景色：红色；
}
li.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：5vh 7.4vw；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.navcont a{
填充：3vh 3vw；
}
.下拉内容{
填充：3vh 3vw；
}
a、 下拉内容{
填充：3vh 3vw；
宽度：100%；
}
.dropbtn{
填充：3vh 3vw；
}
关于{
宽度：60%；
}
关于{
宽度：37.5%；
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-color: blue;
}
p {
color: white;
font-size: 20px;
display: inline;
padding: 20px;
font-family: arial;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(10,10,10);
top: 0;
}
.navcont {
margin: 0;
position: relative;
float: left;
width: 24% !important;
}
.navcont a, .dropbtn {
margin: 0;
position: relative;
display: block;
color: white;
font-size: 20px;
text-align: center;
padding: 5vh 7vw;
text-decoration: none;
border-right: 1px solid rgb(50,50,50);
border-left: 1px solid rgb(50,50,50);
}
.navcont a:hover {
transition-duration: 0.3s;
background-color: rgb(30,30,30);
}
.navcont a:active {
background-color: rgb(9,194,36);
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index:3
}
.dropdown:hover .dropbtn {
transition-duration: 0.3s;
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5vh 7.4vw;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.navcont a {
padding: 3vh 3vw;
}
.dropdown-content {
padding: 3vh 3vw;
}
a.dropdown-content {
padding: 3vh 3vw;
width: 100%;
}
.dropbtn {
padding: 3vh 3vw;
}
div.tr_about {
width: 60%;
}
div.tl_about {
width: 37.5%;
}
}
</style>
</head>
<body>
<div>
<ul class="navbar">
<li class="navcont"><a href="index.htm">Home</a></li>
<li class="navcont"><a href="about.htm">About</a></li>
<li class="navcont"><a href="purchase.htm">Purchase</a></li>
<li class="dropdown" style="/* float: right; */">
<a href="javascript:void(0)" class="dropbtn">Contact</a>
<div class="dropdown-content">
<a href="support.htm">Support</a>
<a href="faq.htm">FAQ</a>
</div>
</li>
</ul>
</div>
</body>
</html>
身体{
背景颜色：蓝色；
}
p{
颜色：白色；
字体大小：20px；
显示：内联；
填充：20px；
字体系列：arial；
}
navbar先生{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：rgb（10,10,10）；
排名：0；
}
navcont先生{
保证金：0；
位置：相对位置；
浮动：左；
宽度：24%！重要；
}
.navcont a、.dropbtn{
保证金：0；
位置：相对位置；
显示：块；
颜色：白色；
字体大小：20px；
文本对齐：居中；
填充：5vh 7vw；
文字装饰：无；
右边框：1px实心rgb（50,50,50）；
左边框：1px实心rgb（50,50,50）；
}
.导航控制a:悬停{
过渡时间：0.3s；
背景色：rgb（30,30,30）；
}
.导航控制a：激活{
背景色：rgb（9194,36）；
}
.粘的{
位置：粘性；
职位：-网络工具包粘性；
排名：0；
z指数：3
}
.dropdown:悬停.dropbtn{
过渡时间：0.3s；
背景色：红色；
}
li.下拉列表{
显示：内联块；
}
.dropdown-content {
padding: 1vh 1vw;
right:10px;
}
a.dropdown-content {
padding: 1vh 1vw;
width: 98%;
}
.dropdown-content a {
padding: 5vh 2.9vw;
}