在页面顶部连接标题，徽标，导航栏和文本

Question

我一直试图将所有这些元素设置在相同的灰色背景上，但是我不知道为什么标题和导航栏是分开的，徽标也不位于灰色背景之上。

代码：

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

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

Answer 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对其进行定位（我不建议这样做）

Answer 2

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

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