CSS对齐和边距问题

Question

I am trying to make a top nav bar. 我正在尝试制作顶级导航栏。 However, I can't seem to fix some minor issues with my CSS. 但是，我似乎无法解决CSS的一些小问题。 Issues: 问题：

There is a margin at the top of the button (some extra blue before the black). 按钮顶部有一个空白（黑色之前有一些额外的蓝色）。 How do I get rid of this? 我该如何摆脱呢？
I am not able to center my text. 我无法将文字居中。 When I try to use the text-align tag in navbar it also affects the button's position. 当我尝试在navbar使用text-align标签时，它还会影响按钮的位置。 On the other hand if I try to put the text in it's own div or p it goes to the next line / can't been seen in the bar. 另一方面，如果我尝试将文本放在自己的div或p则会转到下一行/在栏中看不到。
In the same idea as the previous point. 与上一点相同。 How would I add another button just like the one on the left but on the right? 我如何添加另一个按钮，就像左边的按钮一样，右边的按钮呢？ If I had a button with margin-left: calc(100%-45); 如果我有一个带有margin-left: calc(100%-45);的按钮margin-left: calc(100%-45); I think I would face similar formatting issues. 我想我会遇到类似的格式问题。

Would very much appreciate it if someone could help me with these issues. 如果有人可以帮助我解决这些问题，将不胜感激。

 .menuBtn{ border:none; display:inline-block; vertical-align:middle; overflow:hidden; text-decoration:none; color:inherit; background-color:inherit; text-align:center; cursor:pointer; white-space:nowrap; font-size:24px; width: 45px!important; height: 45px!important; background-size: contain; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; margin-left: 0; margin-right: 0; margin-top: 0!important; background-color: black; } .navbar { overflow: hidden; background-color: #00baff; position: fixed; top: 0; width: 100%; z-index: 1000000000000; height: 45px; color: white; font-size: 30px; line-height: 45px; max-height: 45px!important; margin-top: 0px!important; }

 <div class="navbar"> <button id="menuBtn" class="menuBtn">☰</button> SOME TITLE </div>

Answer 1

Are u expecting like this: 您是否期望这样：

 body { margin:0px; padding:0px; } .menuBtn{ border:none; display:inline-block; overflow:hidden; float:left; color:inherit; background-color:inherit; cursor:pointer; white-space:nowrap; font-size:24px; width: 45px!important; height: 45px!important; background-size: contain; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; margin-left: 0; margin-right: 0; margin-top: 0!important; background-color: black; } .menuBtn1 { border:none; display:inline-block; overflow:hidden; text-decoration:none; color:inherit; background-color:inherit; text-align:center; cursor:pointer; white-space:nowrap; font-size:24px; width: 45px!important; float:right; height: 45px!important; background-size: contain; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; margin:0px; background-color: black; } .navbar { overflow: hidden; background-color: #00baff; position: fixed; text-align:center; top: 0; width: 100%; z-index: 1000000000000; height: 45px; color: white; font-size: 30px; line-height: 45px; max-height: 45px!important; margin-top: 0px!important; }

 <body> <div class="navbar"> <button id="menuBtn" class="menuBtn">☰</button> SOME TITLE <button id="menuBtn" class="menuBtn1">☰</button> </div> </body>

CSS对齐和边距问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-04 10:16:00

CSS对齐和边距问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-04 10:16:00

解决方案1
1 已采纳 2019-08-04 10:16:00