为什么登录按钮低于Html/Css导航栏中的其他按钮？
我是新来的，这可能是我错过了一些愚蠢的错误，我不知道 当我试图制作一个简单的导航栏时，我想把这个登录按钮设置在右边，与其他按钮分开，但高度与其他按钮相同。 问题是这个按钮在下面几个像素，我不知道错误在哪里 CSS: @导入url'https://fonts.googleapis.com/css?family=Montserrat&display=swap'; 身体{ 背景色：黑色； } 保险商实验室{ 列表样式类型：无； 边缘：0毫米； 填充：0毫米； 背景色：黑色； 溢出：隐藏； } 李{ 浮动：左； } 李阿{ 显示：块； 颜色：白色； 文本对齐：居中； 衬垫：3mm； 文字装饰：无； 字体系列：“蒙特塞拉特”，无衬线； } 是{ 浮子：对！很重要； 显示：内联块； 颜色：白色； 文本对齐：居中； 衬垫：3mm； 文字装饰：无； 字体系列：“蒙特塞拉特”，无衬线； } 李娜：停下来{ 边框底部：0.3mm纯红； } HTML: Ejempo导航栏为什么登录按钮低于Html/Css导航栏中的其他按钮？,html,css,Html,Css,我是新来的，这可能是我错过了一些愚蠢的错误，我不知道 当我试图制作一个简单的导航栏时，我想把这个登录按钮设置在右边，与其他按钮分开，但高度与其他按钮相同。 问题是这个按钮在下面几个像素，我不知道错误在哪里 CSS: @导入url'https://fonts.googleapis.com/css?family=Montserrat&display=swap'; 身体{ 背景色：黑色； } 保险商实验室{ 列表样式类型：无； 边缘：0毫米； 填充：0毫米； 背景色：黑色； 溢出：隐藏； } 李{
这就是你要找的，我刚刚从链接中删除了顶部和底部的填充 @导入url'https://fonts.googleapis.com/css?family=Montserrat&display=swap'; 身体{ 背景色：黑色； } 保险商实验室{ 列表样式类型：无； 边缘：0毫米； 填充：0毫米； 背景色：黑色； 溢出：隐藏； } 李{ 浮动：左； } 李阿{ 显示：块； 颜色：白色； 文本对齐：居中； 衬垫：3mm； 文字装饰：无； 字体系列：“蒙特塞拉特”，无衬线； } 是{ 浮子：对！很重要； 显示：内联块； 颜色：白色； 文本对齐：居中； 填充：0 3mm； 文字装饰：无； 字体系列：“蒙特塞拉特”，无衬线； } 李娜：停下来{ 边框底部：0.3mm纯红； } HTML: Ejempo导航栏
这就是你要找的，我刚刚从链接中删除了顶部和底部的填充 @导入url'https://fonts.googleapis.com/css?family=Montserrat&display=swap'; 身体{ 背景色：黑色； } 保险商实验室{ 列表样式类型：无； 边缘：0毫米； 填充：0毫米； 背景色：黑色； 溢出：隐藏； } 李{ 浮动：左； } 李阿{ 显示：块； 颜色：白色； 文本对齐：居中； 衬垫：3mm； 文字装饰：无； 字体系列：“蒙特塞拉特”，无衬线； } 是{ 浮子：对！很重要； 显示：内联块； 颜色：白色； 文本对齐：居中； 填充：0 3mm； 文字装饰：无； 字体系列：“蒙特塞拉特”，无衬线； } 李娜：停下来{ 边框底部：0.3mm纯红； } HTML: Ejempo导航栏
你这里有3毫米的衬垫
#is {
float: right !important;
display: inline-block;
color: white;
text-align: center;
padding: 3mm 3mm;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
您可以将填充物移动到is a{或从is中移除填充物，它看起来会很好您在这里有3mm的填充物
#is {
float: right !important;
display: inline-block;
color: white;
text-align: center;
padding: 3mm 3mm;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
当您按下F12键时，您可以在浏览器中看到一个很好的调试视图，但是您可能知道这一点，尽管您是新手。删除id:is下的3mm填充；删除id:is下的3mm填充；CSS规则可以缩短，因为它有多余的行 @导入url'https://fonts.googleapis.com/css?family=Montserrat&display=swap'; 身体{ 背景色：黑色； } 保险商实验室{ 显示：块； 列表样式类型：无； 边缘：0毫米； 填充：0毫米； 背景色：黑色； 溢出：隐藏； 宽度：100%； 字体系列：“蒙特塞拉特”，无衬线； } 李{ 浮动：左； 填充：0 3px； } 李：悬停{ 边框底部：0.3mm纯红； } 李阿{ 颜色：白色； 文字装饰：无； } 是{ 浮动：对； } Ejempo导航栏
CSS规则可以缩短很多，因为它有多余的行 @导入url'https://fonts.googleapis.com/css?family=Montserrat&display=swap'; 身体{ 背景色：黑色； } 保险商实验室{ 显示：块； 列表样式类型：无； 边缘：0毫米； 填充：0毫米； 背景色：黑色； 溢出：隐藏； 宽度：100%； 字体系列：“蒙特塞拉特”，无衬线； } 李{ 浮动：左； 填充：0 3px； } 李：悬停{ 边框底部：0.3mm纯红； } 李阿{ 颜色：白色； 文字装饰：无； } 是{ 浮动：对； } Ejempo导航栏
因为你在li中添加了额外的填充，你的链接上已经有了填充，所以你不需要在li中使用它。如果你是新手，你可能不知道Firefox DevTools或Chrome webdeveloper工具。你只需按F12键就可以找到它们，它们提供了一个方便的视图，可以很容易地找到这些bug。因为你在li上添加了额外的填充，你的链接上已经有了填充，所以你不需要li。如果你是新手，你可能不知道Firefox DevTools或Chrome webdeveloper工具。你按下F12键就能找到它们，它们提供了一个方便的视图，可以很容易地找到这些bug。