Javascript CSS对齐和边距问题

我想做一个顶部导航栏。然而，我似乎无法解决CSS的一些小问题。问题：

按钮顶部有一个边距（黑色之前有一些额外的蓝色）。我怎样才能摆脱这个

我无法将文本居中。当我尝试在

navbar

中使用

text align

标记时，它也会影响按钮的位置。另一方面，如果我试图将文本放在它自己的

div

或

p

中，它会转到下一行/在栏中看不到

与前一点的想法相同。如何添加另一个按钮，就像左边但右边的按钮一样？如果我有一个左边有

边距的按钮：calc（100%-45）我想我会面临类似的格式问题

如果有人能帮我解决这些问题，我将不胜感激

.menuBtn{
边界：无；
显示：内联块；
垂直对齐：中间对齐；
溢出：隐藏；
文字装饰：无；
颜色：继承；
背景色：继承；
文本对齐：居中；
光标：指针；
空白：nowrap；
字体大小：24px；
宽度：45px！重要；
高度：45px！重要；
背景尺寸：包含；
-moz用户选择：-moz无；
-khtml用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
左边距：0；
右边距：0；
页边距顶部：0！重要；
背景色：黑色；
}
navbar先生{
溢出：隐藏；
背景色：#00baff；
位置：固定；
排名：0；
宽度：100%；
z指数：1000000000000；
高度：45px；
颜色：白色；
字体大小：30px；
线高：45px；
最大高度：45px！重要；
边际顶部：0px！重要；
}

☰
一些头衔

您是否希望这样：

正文{
边际：0px；
填充：0px；
}
menuBtn先生{
边界：无；
显示：内联块；
溢出：隐藏；
浮动：左；
颜色：继承；
背景色：继承；
光标：指针；
空白：nowrap；
字体大小：24px；
宽度：45px！重要；
高度：45px！重要；
背景尺寸：包含；
-moz用户选择：-moz无；
-khtml用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
左边距：0；
右边距：0；
页边距顶部：0！重要；
背景色：黑色；
}
.menuBtn1{
边界：无；
显示：内联块；
溢出：隐藏；
文字装饰：无；
颜色：继承；
背景色：继承；
文本对齐：居中；
光标：指针；
空白：nowrap；
字体大小：24px；
宽度：45px！重要；
浮动：对；
高度：45px！重要；
背景尺寸：包含；
-moz用户选择：-moz无；
-khtml用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
边际：0px；
背景色：黑色；
}
navbar先生{
溢出：隐藏；
背景色：#00baff；
位置：固定；
文本对齐：居中；
排名：0；
宽度：100%；
z指数：1000000000000；
高度：45px；
颜色：白色；
字体大小：30px；
线高：45px；
最大高度：45px！重要；
边际顶部：0px！重要；
}

☰
一些头衔
☰

空格是由

上的

显示：内联块

造成的。更改为

display:block

可能会解决您的问题。这会用按钮修复问题，但会导致标题消失。我猜它已经移到下一行了。只是你想在菜单btn之前删除额外的蓝色吗@AntersBearu想在菜单btn之前删除额外的蓝色，将一些标题对齐在中间，你想有另一个按钮，就像左边的按钮，但在右边，这三件事你期待我是对的@Antersbears“垂直对齐：顶部；.menuBtn”类如何？