在图像上调整我的标题图标、标题和导航栏溢出我的标题,它被设置为占据屏幕高度的 10%。我尝试在标题 div 中设置元素高度,但这似乎没有任何作用。
如有任何帮助,我们将不胜感激。图像(图标溢出标题)和下面的代码。让我知道是否可以进一步澄清。
.banner {
z-index: 1;
position: fixed;
width: 100%;
background-color: white;
height: 10%;
margin: 0;
padding: 0;
}
.wrapper {
width: 30%;
max-height: 100%;
margin: 0;
float: left;
vertical-align: middle;
}
.banner p {
font-family: "Gentium Basic";
text-align: left;
display: block;
height: 100%;
}
.banner img {
float: left;
padding: 5px;
margin-top: -10px;
height: 100%;
}
.ban1 {
padding-top: 50px;
vertical-align: top;
}
<div class="banner">
<div class="wrapper">
<p>
<img src=UpYours.png height=1%>
<span class="ban1" style=color:grey>What</span>
</p>
</div>
<div class="navbar">
<a href="#">me</a>
<a href="#">you</a>
<a href="#">what</a>
<a href="#" class="right">today</a>
</div>
</div>
最佳答案
我认为可能是您的 float:left;
将所有内容都推出去了。您可以在横幅 div 上尝试 display:flex;
吗?我已经在下面修改了你的代码,看看:
.banner {
z-index: 1;
position: fixed;
width: 100%;
background-color: white;
height: 10%;
margin: 0;
padding: 0;
background: #e5fbff;
display:flex;
}
.wrapper {
width: 30%;
max-height: 100%;
margin: 0;
vertical-align: middle;
}
.wrapper p {
font-family: "Gentium Basic";
text-align: left;
display: block;
height: 100%;
margin:0;
}
.wrapper img {
max-height: 100%;
}
.ban1 {
padding-top: 50px;
vertical-align: top;
}
<div class="banner">
<div class="wrapper">
<p>
<img src="https://via.placeholder.com/150">
<span class="ban1" style="color:grey;">What</span>
</p>
</div>
<div class="navbar">
<a href="#">me</a>
<a href="#">you</a>
<a href="#">what</a>
<a href="#" class="right">today</a>
</div>
</div>
只是更改了横幅的背景颜色以显示它已包含在内。
关于html - 标题图标、标题和导航栏在屏幕调整大小时溢出标题容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54477260/