Html 我试图在导航栏上均匀地隔开链接

我正试图在我的导航栏上均匀地隔开指向我网站的链接。我有麻烦的最后一个链接，因为它是一个下拉列表，从我的其他链接分开。通过在CSS样式表中添加

width:25%

到

.navbar a

，我可以在导航栏上均匀地分离非下拉链接。我试着在

中添加
宽度：25%
。下拉列表
，但没有成功。我还尝试将它添加到
.dropdown.dropbtn
中，但也没有成功

以下是我的HTML布局示例：


/*导航栏容器*/
navbar先生{
溢出：隐藏；
背景色：#272424；
字体系列：Arial；
}
/*导航栏内的链接*/
纳瓦尔先生{
浮动：左；
字体：Arial；
字体大小：20px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
宽度：25%；
}
/*下拉式容器*/
.下拉列表{
浮动：左；
溢出：隐藏；
}
/*下拉按钮*/
.下拉菜单{
字体大小：20px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体系列：继承；/*对于手机上的垂直对齐很重要*/
边距：0；/*对于手机上的垂直对齐非常重要*/
宽度：100%；
}
/*将红色背景色添加到悬停时的导航栏链接*/
.navbar a:悬停，.dropdown:悬停.dropbtn{
背景色：#81A3A7；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
/*将灰色背景色添加到鼠标悬停时的下拉链接*/
.下拉列表内容a：悬停{
背景色：#ddd；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}

名称
写
为什么要写？
马上就来

您的

删除填充或将其作为宽度计算的一部分

* {box-sizing: border-box;}

一切都是正确的，只要你可以添加宽度：25%；在你的下拉列表中

.dropdown {
    float: left;
    overflow: hidden;
   width: 25%;
}

欢迎光临只需在
div.下拉列表中添加
宽度：25%
您的下拉列表与其他链接的宽度相同。
我已经根据您的要求做了一些更改，请检查


/*导航栏容器*/
*{
框大小：边框框；
}
navbar先生{
溢出：隐藏；
背景色：#272424；
字体系列：Arial；
}
/*导航栏内的链接*/
纳瓦尔先生{
浮动：左；
字体：Arial；
字体大小：20px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
宽度：25%；
}
/*下拉式容器*/
.下拉列表{
浮动：左；
溢出：隐藏；
宽度：25%；
}
/*下拉按钮*/
.下拉菜单{
字体大小：20px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体系列：继承；/*对于手机上的垂直对齐很重要*/
边距：0；/*对于手机上的垂直对齐非常重要*/
宽度：100%；
}
/*将红色背景色添加到悬停时的导航栏链接*/
.navbar a:悬停，.dropdown:悬停.dropbtn{
背景色：#81A3A7；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.navbar.下拉式内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
宽度：自动；
}
/*将灰色背景色添加到鼠标悬停时的下拉链接*/
.下拉列表内容a：悬停{
背景色：#ddd；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}

名称
写
为什么要写？
马上就来

在div.下拉列表中添加宽度：25%。更多的参考资料在我的回答下面请检查下面的答案：）谢谢你的回答。我试过这样做，但我想写的是在同一级别的其他链接旁边不要发布代码、错误或输出的图像！