如何在侧面放置两个徽标并在中间导航？

Question

我正在制作一个网站。我有2个任意标识和一个导航栏。我想将它们组织成下图所示的顺序，我尝试了几种方法; clear：both，float：left和display：inline-block。

有人能否以任何方式为我解释这个问题？

http://jsfiddle.net/genome314/862r132c/ 是我目前正在做的事情。

HTML：

<div id="nav">
<img id="fLogo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
    <ul id="ontop">
        <li><a href="#Facebook">Facebook</a></li>
    </ul>
    <ul id="underneath">
      <li><a href="#Home">Home</a></li>
      <li><a href="#Games">Games</a></li>
      <li><a href="#Trailers">Trailers</a></li>
      <li><a href="#Walkthroughs">Walkthroughs</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
<img id="sLogo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>

CSS：

#nav {
width: 100%;
margin: 0 0 1em 0;
padding: 0;
overflow:auto;}
#fLogo{
width:100px;
height:100px;
}
#sLogo{
width:100px;
height:100px;
}
#titleBar{
}
#nav ul{
list-style:none;
width:450px;
margin: 0 auto;
padding: 0;
background-color: #333;
overflow:hidden;
float:centre;}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 10px 14px;
font-weight: bold;
color: #E6E600;
border-right: 1px solid #FFFFCC; }
#nav li:first-child a {
border-left: 1px solid #FFFFCC; }
#nav li a:hover {
color: #FF3300;
background-color: #FFFF99; }

Answer 1

• 将一个包装元素添加到中间的Facebook和主菜单
• 在#nav中添加min-width以防止换行
• 设置所有float: left
的2个徽标和中间菜单

有关详细信息，请查看更新的JSFiddle，我还清理了一些代码。

Answer 2

导航栏上有float: centre。没有浮动：中心这样的东西。

你需要做的是，如果你要使用花车，那就是将你所有的物体漂浮起来。因此，将图像，UL和其他图像设置为float: left