似乎无法将徽标与导航栏对齐答案

【问题标题】：Cant seem to align logo with navbar似乎无法将徽标与导航栏对齐
【发布时间】：2013-07-20 21:30:22
【问题描述】：

我对 Web 开发还很陌生，我一直在尝试创建一个网站，到目前为止，我已经成功地制作了一个导航菜单和一个徽标。我的问题是，在彻底尝试了许多教程和帖子后，我无法解决我的问题。我想将我的徽标与导航栏对齐，以便徽标位于左侧，导航栏与徽标对齐，但位于右侧，两者相邻。下一个问题是如何为某些导航栏选项卡创建下拉菜单？谢谢你

我的html如下

<!DOCTYPE html>
<html>
<head>
<title>S3ntry Aust Transport</title>
<link href="navbarlog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="Layout1" style="overflow: auto; ">
<header>
<div id="menu">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" 

height="176" id="logo"></a>
</div>
</header>
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

而css部分如下

ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li     
{float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px   
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text-  
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text-
transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}}

#header ul li {
list-style: none;
display:inline-block;
float:right
} 

logo.JPG 
{
vertical-align:middle;
float:left
}

【问题讨论】：

将 CSS 中的 logo.JPG 重命名为 .logo，然后将图像包装器编辑为 <img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo" class="logo">。这能解决任何问题吗？作为旁注但并不真正相关，从代码中删除</a>，它没有开始。

标签： css menu navigation alignment graphical-logo

【解决方案1】：

如果你要重组你的 HTML，将你的 'ul' 移动到标题中，这很容易。

<header>
    <div id="logo">
        <img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
    </div>
    <div id="menu">
        <ul>
            <li><a id="nav-index" class="first"   href="%E2%80%9D#%E2%80%9D">Home</a></li>
            <li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
            <li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
            <li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
            <li><a id="nav-latestnews" href="#">Latest News</a></li>
            <li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
        </ul>    
    </div>
</header>

以及所需的 CSS

header { width: 700px; }

#logo { float: left; }

#menu { float: right; }
#menu ul { padding: 0; margin: 0; }

这是一个 JSFiddle 显示它的工作原理：http://jsfiddle.net/STu89/

我还删除了一个没有打开的，并去掉了各种不匹配的 /div。

【讨论】：

你的 HTML 中有两个 #logo id