【问题标题】：Problems aligning my logo with the navigation bar将我的徽标与导航栏对齐时出现问题
【发布时间】：2012-12-31 17:49:14
【问题描述】：

我已经在这里坐了 2 个小时，只是想将我的徽标与导航栏对齐，这样它就可以放在一条类似的线上 http://weightshift.com/

我也在尝试添加这张图片

http://imageshack.us/photo/my-images/26/logonkg.png/

与使用以下 CSS 的导航栏对齐，并且每次我尝试对齐导航栏时都会卡在标题下方，我使用响应式框架在 Dreamweaver 上创建它，非常感谢帮助.

#menu {
     background:#333;
    height:100px;
}

#h1 {
width: 100px;

}


#menu-wrap {
      margin:0 auto;
    width:1200px;
}

#navigation-main {
    display: inline-block;
    padding:0px;
    color:#fff;
    font-size:24px;
    font-weight:bold;
    margin-bottom:5px;
    float: right;
}

#navigation-main li {
    float:left;
    margin-right:20px;
}

#navigation-main li a {
    display:block;
    color:#fff;
}

#navigation-main li ul  {
    display:none;
    z-index:0;
}

#top-nav-info {
    background:#dddddd;
    float:left;
    width:1200px;
}

#top-nav-sec li a {
    padding:0px;
    display:inline;
    height:42px;
    color:#a19f9f;
}

目前的html是

<body>
<div class="gridContainer clearfix">
  <div id="LayoutDiv1">

    <div id="header">

      <div id="menu">
         <h1> <img src="images/logo.png"> </h1>

                <div id="menu-wrap">



<ul id="navigation-main">
          <li><a href="">Home</a><span class="nav-sec">The Beginning</span></li>
            <li><a href="">Articles</a><span class="nav-sec">Tips, Tricks, Advice</span></li>
            <li><a href="">Tutorials</a><span class="nav-sec">Photoshop Techniques</span></li>
            <li><a href="">Resources</a><span class="nav-sec">Fonts, freebies, wallpapers</span></li>

        </ul><!--end navigation-menu-->
    </div><!--end menu-wrap-->
    </div>
   </div>
  </div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>

【问题讨论】：

我在您提供的 HTML 中没有看到徽标
我把它拿出来了，这样你就可以看到我想要做什么，因为 html 中的徽标只会使页面无法查看我在
是

然后 #h1 { 在菜单下面的 css 中
在排除任何故障之前，您需要验证您的 HTML 以使其按预期呈现。点击http://validator.w3.org查看您的错误。

标签： html css nav graphical-logo

【解决方案1】：

要在您提供的示例中重新创建标题，您只需将float: left 添加到徽标图像，并将float: right 添加到包含导航链接的ul。

<img class="left" />
<ul class="right">
    <!-- nav links here -->
</ul>

.left { float: left; }
.right { float: right; }

这是一个有效的jsfiddle。你想用#menu-wrap 做什么？这是我唯一拿出来的东西，因为我看不到你想用它做什么，而且它破坏了标题。

【讨论】：

我试过浮动它，它不会工作这是它应该看起来的样子imageshack.us/photo/my-images/99/bannerexample.png我只是尝试再次浮动它，同样的错误发生了
@Joe 查看我刚刚添加的工作示例。如果这是您需要的，请不要忘记将其标记为正确答案。

【解决方案2】：

除了@Simplify 的回答之外，还有不止一种方法可以做到这一点。如果您希望这些项目左右浮动，请确保两个浮动元素的总宽度不超过其容器的宽度。

选项 1

JS 小提琴

http://jsfiddle.net/bjuGB/1/

HTML

<div class="container">
  <img class="logo" />
  <ul class="nav">
    <!-- nav links here -->
  </ul>
  <div style="clear: both"></div>
</div>

CSS

.container { width: 1000px; }
.logo { 
  float: left; 
  width: 300px;
}
.nav { 
  float: right; 
  width: 600px;
}

我还添加了一个clear: both 样式的 div，以确保任何新元素都不会“落入”浮动中，而是移动到新行。

选项 2

在这里使用绝对定位可能不会那么令人头疼。只需确保使用相对定位定义容器即可。

JSFiddle

http://jsfiddle.net/6gnkW/

HTML

<div class="container">
  <img class="logo" />
  <ul class="nav">
    <!-- nav links here -->
  </ul>
  <div style="clear: both"></div>
</div>

CSS

.container {
  position: relative;
  width: 1000px;
}
.logo, .nav { 
  position: absolute; 
  top: 5px;
}
.logo { left: 10px; }
.nav { right: 10px; }

【讨论】：

【解决方案3】：

我会亲自将您的徽标移到菜单之外。而不是

<div id="header">

  <div id="menu">
     <h1> <img src="images/logo.png"> </h1>

我会这样做

<div id="header">
     <h1> <img src="images/logo.png"> </h1>

  <div id="menu">

这只是个人喜好。接下来就像提到的@Simplify 然后你想让这些元素像这样左右浮动：

<div id="header">
     <h1>Name of Site<img class="left" src="images/logo.png" alt="" /></h1>

  <div id="menu">

你会注意到我把类放在左边，一个 alt 和结束标记也放在图像“/”中。不时使用http://validator.w3.org/检查您的代码不会有什么坏处

最后你想把它添加到你的 css 文件中。

.left { 
float: left; 
}

#menu { 
width: 100%; 
padding: 0; 
margin: 0; 
}

#menu-wrap { 
margin: 0 auto; 
width: 1200px; /* You will need to change this */
float: right; 
}

#header h1 { 
text-indent: -9999px; 
} 

#header h1 img { 
border: none; 
}

文字缩进会让h1文字消失，同时保持良好的seo。忽略灰色文本。不知道为什么这样做:)

另外，我注意到您将菜单的宽度设置为 1200 像素。我确定您希望页面的整个宽度都是这个大小。在这种情况下，您需要调整它以使您的徽标适合同一行。例如。如果您的徽标是 200 像素宽，您将希望减小菜单的宽度以反映包括任何边距或填充您的添加。这将允许徽标和菜单并排浮动。简而言之，您不希望这两个元素都比其 1200px 的主容器宽，否则它不会并排浮动。

您还需要创建一个清除浮动元素的类。我喜欢用.breaker

.breaker { clear: both; }

添加

<div class="breaker"></div>

在关闭菜单标记之后。

【讨论】：

【解决方案4】：

徽标和导航具有#navigation .stack-width 的父容器。该堆栈宽度的宽度设置为 960 像素。默认情况下，logo 和 nav 块继承了框的 100% 的宽度。它们需要添加特定的宽度，以便它们可以在父容器中浮动。我倾向于使用 Firefox 在浏览器中处理 CSS，而不是登录网站并在 Themebuilder 中进行编辑。以下样式之一是覆盖当前应用于 #navigation-region .content .view-multilingual-menu 的 margin-left。无需粘贴 CSS 的这一部分，您可以在 Themebuilder 中应用的任何位置删除样式。由于父容器是 960 像素，CSS 将按如下方式设置宽度。徽标设置为 218 像素以适应图像的宽度。导航设置为 728 像素。每个表格元素都有一个上下 4 像素和左右 7 像素的填充。这是对通常为 4px、10px 的表格的默认主题样式的覆盖。徽标 218 像素 + 导航 728 像素 + 填充 14 像素 = 960 像素

#navigation-region .content .view-multilingual-menu {margin-left: 0 !important;}

#block-block-476 {width: 218px; float: left;}

#block-views-multilingual-menu-block {width: 728px; float: right;}

.view-multilingual-menu table th:first-child, .view-multilingual-menu table td:first-child, .view-multilingual-menu table td, .view-multilingual-menu table th {

padding: 4px 7px;

}

【讨论】：