Question

我正在开展一个包含创建Web应用程序的项目。目前，我专注于网站的总体设计和布局。首先，我想在顶部有一个水平的深灰色标题。在此之下，我想要两列，一列带有导航栏，另一列带有内容。

以下是我的代码，我不确定是什么导致黑色标题问题无法显示。

＆＃13;

<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;

Answer 1

你必须使用左浮动元素（徽标和标题），并且你的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;
}

https://jsfiddle.net/49m5395n/13/

HTML / CSS标头格式问题

1 个答案: