为什么文本元素在div之外？
为什么文本元素在div之外？
提问于 2018-06-10 04:32:10
非常快速的问题，我已经研究过这个问题，并试图寻找一个解决方案，但没有运气。我在div中垂直对齐两个文本，但是div中的文本总是在它的容器之外，我不知道为什么。
我在下面附上了两张图片。第一个链接是问题所在，第二个链接是我想要的样子。
谢谢!
CSS
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.bar-manager {
width: 100%;
}
.top-bar {
display: flex;
align-items: center;
height: 7%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.top-bar p {
margin-left: 10px;
font-weight: lighter;
}
.bottom-bar {
display: flex;
flex-direction: column;
align-items: center;
height: 9%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.bottom-bar h1 {
margin-left: 10px;
font-weight: normal;
font-size: 12px;
}HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div class="bar-manager">
<div class="top-bar">
<p>Homepage</p>
</div>
<div class="bottom-bar">
<h1>Welcome, Omard2000</h1><br>
<p>some text</p>
</div>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 04:45:45
你有9%的高度，这就是为什么你的链接掉了，在你的css中删除高度:9%
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50778292
复制相关文章
相似问题