我正在开展一个包含创建Web应用程序的项目。目前,我专注于网站的总体设计和布局。首先,我想在顶部有一个水平的深灰色标题。在此之下,我想要两列,一列带有导航栏,另一列带有内容。
以下是我的代码,我不确定是什么导致黑色标题问题无法显示。
完整的CSS文件:https://pastebin.com/kpUHV71Z
<section class="management">
<div class="header-div">
<img src="Golf.png" class="management-logo" height="50" width="50">
<h1 class="impact" id="management-header">Management Dashboard</h1>
</div>
<div class="left left-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="right">
<h3>Staff</h3>
</div>
<div class="clear"></div>
</section>
&#13;
答案 0 :(得分:0)
你必须使用左浮动元素(徽标和标题),并且你的header-div上没有清除,所以它实际上没有高度。
因此请使用clearfix进行调整,或使用inline-block或flexbox而不是浮点数。
.management-logo {
margin-right: 20px;
display:inline-block;
}
#management-header {
margin-top: 10px;
font-weight: bold;
font-size: 30px;
color: white;
margin: 0;
display:inline-block;
}