有谁知道为什么右边的按钮与标题和左边的按钮不一致?我用 position:fixed 试了一下,但是它在标题下面(可见但不可点击)。我现在不知道我在这里做错了什么。
<header class="title">
<button id="buttonLeft" class="btn-square pull-left" onclick="toggleMenu()">
<i class="fa fa-chevron-left"></i>
</button>
<div id="headerElements">
<h1> TITEL </h1>
</div>
<button id="buttonRight" class="btn-square pull-right" onclick="">
<i class="fa fa-chevron-right"></i>
</button>
</header>
header.title {
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 72px;
background-color: #37baf4;
color: white;
display: inline;
text-align: center;
z-index: 90;
}
header h1 {
left: 0;
top: 0px;
right: 0;
width: 100%;
z-index: 90;
}
#buttonLeft {
float: left;
margin: 18px;
z-index: 101;
}
#buttonRight {
float: right;
margin: 18px;
z-index: 101;
}
.pull-left {}
.pull-right {}
.btn-square {
background-color: rgba(255, 255, 255, 1.0);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
width: 40px;
height: 40px;
border: 1px solid;
border-color: white;
}
最佳答案
header.title {
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 72px;
background-color: #37baf4;
color: white;
display: inline;
text-align: center;
z-index: 90;
}
header.title div{
float: left;
}
header h1 {
left: 0;
top: 0px;
right: 0;
z-index: 90;
}
#buttonLeft {
float: left;
margin: 18px;
z-index: 101;
}
#buttonRight {
float: right;
margin: 18px;
z-index: 101;
}
.pull-left {}
.pull-right {}
.btn-square {
background-color: rgba(255, 255, 255, 1.0);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
width: 40px;
height: 40px;
border: 1px solid;
border-color: white;
}
<header class="title">
<div>
<button id="buttonLeft" class="btn-square pull-left" onclick="toggleMenu()">
<i class="fa fa-chevron-left"></i>
</button>
</div>
<div id="headerElements">
<h1> TITEL </h1>
</div>
<div>
<button id="buttonRight" class="btn-square pull-right" onclick="">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</header>
.titlle
中每个 div
的宽度取决于您的选择。
关于html - 按钮和文字不在一条线上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36703560/