在页面顶部连接页眉、徽标、导航栏和文本答案

【问题标题】：Concatenate header, logo, navigation bar, and text on top of a page在页面顶部连接页眉、徽标、导航栏和文本
【发布时间】：2018-12-10 13:30:03
【问题描述】：

我一直在尝试将所有这些元素放在相同的灰色背景上，但我不知道为什么标题和导航栏是分开的，并且徽标不在灰色背景的顶部。

代码：

	.header {
		background-color: #666;
		text-align: center;
		font-size: 35px;
		color: white;
        margin:0;
		
	}

	#navigation {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #666;
	}

	#navigation li {
		float: left;
	}

	#navigation li a {
		display: block;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}

	#navigation li a:hover {
		background-color: #111;
	}

<div>
	  <h2 class = "header" >Personal Portal</h2>
	</div>

	<div>
	<div>
	<nav>
		<a> <img src="logo.png" alt="Logo" style="float:right; position:relative; "> </a>

	<ul id = "navigation">
	  <li><a class="active" href="Home.htm">Home</a></li>
	  <li><a href="OpenedTickets">Opened Tickets</a></li>
	  <li><a href="FAQ.htm">FAQ</a></li>
	  <li><a href="Stats.htm">Stats</a></li>
	</ul>
	</nav>
	</div>
	<div>
	  <div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF"> Logged in as </div>

这是一个非常初学者风格的问题，但我找不到我想要的答案。感谢您的帮助！

【问题讨论】：

Why would margin not be contained by parent element?的可能重复
该副本解释了“为什么标题和导航栏是分开的”问题，这是由于 h2 标题元素的默认边距。
你想要Logged in as之后的标志吗？？
@CBroe 基本上中间的空间是 header 的 margin-bottom 和导航的 margin-top 之间最大的，并且 header 有默认的边距？
h2 的默认边距来自浏览器样式表。熟悉一下浏览器的开发者工具，它们有助于轻松检查此类问题。

标签： html css

【解决方案1】：

你可以试试这样的：

<div style="background-color: #666; height: 50px">  
    <nav style="clear: both">
        <ul id = "navigation">
            <li><a class="active" href="Home.htm">Home</a></li>
            <li><a href="OpenedTickets">Opened Tickets</a></li>
            <li><a href="FAQ.htm">FAQ</a></li>
            <li><a href="Stats.htm">Stats</a></li>
        </ul>

       <h2 class = "header" >Personal Portal</h2>

       <div class="rightInfo">
           <div id="loggedas" style = "float:right; padding-top:0; background-color:#666; color:#FFFFFF"> 
      Logged in as 
           </div>

       <a> 
           <img src="logo.png" alt="Logo" style="float:right; position:relative; ">       
       </a>
    </div>
</nav>

.header {
    background-color: #666;
    text-align: center;
    font-size: 35px;
    color: white;
    float: left;
    display: inline-block;
    margin-top: 0;
}

.rightInfo{
    float: right;
}

#navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #666;
    float: left;
}

#navigation li {
    float: left;
}

#navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navigation li a:hover {
    background-color: #111;
}

你的三个显示元素应该有一个共同的父元素，否则它们将不会按照你想要的方式显示，除非你使用 position: absolute 来定位它们（我不建议这样做）

【讨论】：

【解决方案2】：

完成上一个答案（关于为什么标题和导航栏分开的问题）。您已将这些元素放在单独的分区中，每个分区都有自己的背景颜色。您可以通过删除它们之间的边距来纠正这种情况，但是：如果您希望两个（或更多）事物位于一个共同的背景上，最好将该背景设置在一个共同的父级上。

此外，在任何情况下，当您想知道浏览器为何呈现您的代码时：询问浏览器。按 Ctrl-Shift-I（适用于 Chrome、Chromium 和 Firefox）。它将显示所有应用的样式（以及它们的确切来源），以及元素大小、填充、边框和边距。

【讨论】：