javascript - CSS对齐和边距问题
问题描述
我正在尝试制作一个顶级导航栏。但是,我似乎无法解决我的 CSS 的一些小问题。问题:
- 按钮顶部有一个边距(黑色之前有一些额外的蓝色)。我该如何摆脱这个?
- 我无法将文本居中。当我尝试在其中使用
text-align
标签时,navbar
它也会影响按钮的位置。另一方面,如果我尝试将文本放入它自己的文本中,div
或者p
它转到下一行/在栏中看不到。 - 与前一点的想法相同。我将如何添加另一个按钮,就像左侧但右侧的按钮一样?如果我有一个按钮,
margin-left: calc(100%-45);
我想我会面临类似的格式问题。
如果有人可以帮助我解决这些问题,将不胜感激。
.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>
解决方案
你期待这样吗:
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>
推荐阅读
- angular - 角度中的数组对象始终默认为0,同时从中间删除一个对象并添加一个新对象
- android - 如何标记 android studio 中的输入文本以在 NLP 模型中处理?
- android - 带有 ViewPager 的 Butterknife NullPointerException
- c# - 使用 SQL Server 表中的列填充 CartesianChart 标签
- hibernate - 将缓存与 Spring Boot 集成
- sql - 日期之间的左连接匹配
- python - 在 Python 中的列表中切片元组
- multithreading - 图片未在视图控制器启动 Swift 时加载
- html - 为什么 HTML 可拖动元素与父背景一起拖动?
- python - if python语句中的多个and