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

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）。 它将向您显示所有应用的样式（以及它们的确切来源）以及元素大小，内边距，边框和边距。