Css Can'；t将标题和导航放在一起

我试图将我的导航栏放在标题旁边，但它强制将标题放在导航栏的顶部。如果您不知道我的意思，我希望标题和导航菜单的布局如下： 好的，亨利

我在css中添加了一些代码-

还添加了包装器，以保持对所有内容的控制

• 这基本上是说除了

  #header

  和

  #内容

• 另外，

  #标题

  #标题h1

  #标题#导航

  #内容

  将全部删除 飘向左边
• 而#wrap基本上以自身为中心

  #wrap { margin: 0 auto; width: 700px; }
  #header,
  #content{ clear: both; }
  
  #header,
  #header h1,
  #header #nav { float: left; }
  

请注意，您可能也想在

内容中添加宽度和高度值，当然不是高度

如果你想使用

#wrap你应该知道它应该是你最宽元素的宽度

#header#nav{float:left；}这似乎有些过分，你可以使用#nav{float:left；}#反正导航是唯一的。@Willempie不一定

float:left

是告诉浏览器元素实际宽度和高度的终点的好方法。就像这样：我指的是你如何指定css规则，

#nav{float:left；}

对于浏览器来说比

#header}nav{float:left；}

更容易解析，同时保持完全相同的视觉输出。@Williempie花了我这么长时间才明白你的意思。虽然我不认为这是过分的，因为它实际上是有意义的。我想让它更容易阅读。特别是对于初学者来说，这个

#header#nav

应该马上说

#nav

在

#header

里面。

body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}

#header{
float: right;
}


ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}

li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}

#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}

#wrap { margin: 0 auto; width: 700px; }
#header,
#content{ clear: both; }

#header,
#header h1,
#header #nav { float: left; }