1

我已经在这里坐了 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>
4

4 回答 4

1

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

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

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

这是一个工作jsfiddle。你想做什么#menu-wrap？那是我唯一拿出来的东西，因为我看不出你想用它做什么，而且它打破了头球。

于 2012-12-31T17:56:37.557 回答
1

除了@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; }
于 2012-12-31T18:53:33.957 回答
1

我会亲自将您的徽标移到菜单之外。代替

<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>

在您的关闭菜单标签之后。

于 2012-12-31T19:12:56.447 回答
0

徽标和导航具有#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;

}
于 2014-04-27T23:21:15.883 回答