时间戳

首页 > 解决方案 > 在页面顶部连接页眉、徽标、导航栏和文本

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

问题描述

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

编码：

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

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

标签： htmlcss

解决方案

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

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

推荐阅读