选项1

Question

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

Answer 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做什么？这是我唯一拿出来的东西，因为我无法看到你试图用它做什么，而且它打破了标题。

Answer 2

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

选项1

JS Fiddle

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

Answer 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。忽略灰色文字。不确定为什么这样做:)）

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

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

.breaker { clear: both; }

添加

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

关闭菜单标签后

。

Answer 4

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

}

将徽标与导航栏对齐时出现问题

4 个答案:

选项1

选项2