Html 为什么我的按钮在页面上向下移动？

我正在尝试在我的网站上创建一个导航栏。我尝试过更改按住按钮的元素的显示类型，但什么也没发生。我所做的主要工作是将这些按钮集中在导航栏的中间。我该怎么做才能让它看起来更自然？提前谢谢

显然，我也必须有更多的句子，所以这是一个句子。这是另一句话。这是另一个

/*导入字体*/
@导入url（'https://fonts.googleapis.com/css?family=Open+无|机器人：300’；
html，正文{
保证金：0；
背景色：rgb（236240241）；
}
按钮：焦点{
大纲：0；
}
.mainBlock{
背景色：rgb（29,49,49）；
}
·主座h1{
文本对齐：居中；
字体系列：“开放式Sans”，无衬线；
字号：48pt；
填充顶部：20px；
页边距底部：0；
填充底部：0；
颜色：rgb（236240241）；
边际上限：0；
}
·主座h3{
文本对齐：居中；
字体系列：“Roboto”，无衬线；
字号：18pt；
颜色：rgb（236240241）；
边缘底部：50px；
}
/*大按钮样式*/
.主按钮{
文本对齐：居中；
}
.main按钮输入[类型=提交]{
字体系列：“开放式Sans”，无衬线；
字体大小：15磅；
文本对齐：居中；
边界：无；
宽度：200px；
高度：40px；
利润率：10px；
边界半径：3px；
颜色：rgba（255，255，255，1）；
位置：静态；
光标：指针；
过渡：所有的0.1都放松；
}
#浏览{
背景色：rgb（41128185）；
盒影：0 10px 0 rgb（53,93,158）；
}
#浏览：悬停{
盒影：0 7px 0 rgb（53,93,158）；
}
#创造{
背景色：rgb（231,76,60）；
盒影：0 10px 0 rgb（192,57,43）；
边缘底部：42px；
}
#创建：悬停{
盒影：07px00rgb（192,57,43）；
}
按钮：焦点，输入[type=“submit”]：焦点{
大纲：0；
}
#导航列表容器{
浮动：对；
右边填充：10px；
}
#导航{
背景色：rgb（26188156）；
字体系列：“开放式Sans”，无衬线；
填充顶部：20px；
垫底：20px；
}
#homelink{
文字装饰：无；
颜色：白色；
背景色：rgb（22160133）；
左边距：10px；
填充：10px；
}
#登录{
左边距：10px；
}
.纳瓦巴利姆{
边界半径：100px；
边界：无；
高度：40px；
宽度：100px；
盒影：0 3px 7px 3px rgba（0,0,0,0.2）；
光标：指针；
颜色：白色；
背景色：rgb（52,73,94）；
过渡：所有的0.1都放松；
}
.navbaritem:悬停{
盒影：0 5px 10px 4px rgba（0,0,0,0.2）；
}

辩论者
欢迎来到我们的网站
站点信息

更多信息
在
#nav
上删除
填充：25px
，并用
行高：50px
替换它，有望解决您的问题。看起来您认为按钮将按其文本对齐，而不是按按钮本身对齐。填充将两个按钮向下推25像素，而不仅仅是它们的文本。
我认为部分问题在于导航不包含其子按钮的高度，因为右侧的按钮是浮动的。为了解决这个问题，你可以

在导航clearfixed的情况下，20px的顶部和底部填充物实际上将均匀地放置在按钮周围。然后，您可以通过将主链接更改为
display:inline block
来修复左侧主链接的未对齐


/*导入字体*/
@导入url（'https://fonts.googleapis.com/css?family=Open+无|机器人：300’；
html，
身体{
保证金：0；
背景色：rgb（236240241）；
}
.clearfix:：在{/*之后这是新的*/
内容：''；
显示：表格；
明确：两者皆有；
}
按钮：焦点{
大纲：0；
}
.mainBlock{
背景色：rgb（29,49,49）；
}
·主座h1{
文本对齐：居中；
字体系列：“开放式Sans”，无衬线；
字号：48pt；
填充顶部：20px；
页边距底部：0；
填充底部：0；
颜色：rgb（236240241）；
边际上限：0；
}
·主座h3{
文本对齐：居中；
字体系列：“Roboto”，无衬线；
字号：18pt；
颜色：rgb（236240241）；
边缘底部：50px；
}
/*大按钮样式*/
.主按钮{
文本对齐：居中；
}
.main按钮输入[类型=提交]{
字体系列：“开放式Sans”，无衬线；
字体大小：15磅；
文本对齐：居中；
边界：无；
宽度：200px；
高度：40px；
利润率：10px；
边界半径：3px；
颜色：rgba（255，255，255，1）；
位置：静态；
光标：指针；
过渡：所有的0.1都放松；
}
#浏览{
背景色：rgb（41128185）；
盒影：0 10px 0 rgb（53,93,158）；
}
#浏览：悬停{
盒影：0 7px 0 rgb（53,93,158）；
}
#创造{
背景色：rgb（231,76,60）；
盒影：0 10px 0 rgb（192,57,43）；
边缘底部：42px；
}
#创建：悬停{
盒影：07px00rgb（192,57,43）；
}
按钮：焦点，
输入[type=“submit”]：焦点{
大纲：0；
}
#导航列表容器{
浮动：对；
右边填充：10px；
}
#导航{
背景色：rgb（26188156）；
字体系列：“开放式Sans”，无衬线；
填充顶部：20px；
垫底：20px；
}
#homelink{
文字装饰：无；
颜色：白色；
背景色：rgb（22160133）；
左边距：10px；
填充：10px；
显示：内联块；/*这是新的*/
}
#登录{
左边距：10px；
}
.纳瓦巴利姆{
边界半径：100px；
边界：无；
高度：40px；
宽度：100px；
盒影：0 3px 7px 3px rgba（0,0,0,0.2）；
光标：指针；
颜色：白色；
背景色：rgb（52,73,94）；
过渡：所有的0.1都放松；
}
.navbaritem:悬停{
盒影：0 5px 10px 4px rgba（0,0,0,0.2）；
}

欢迎来到我们的网站
siteinfo
更多信息