Html 将我的徽标与导航栏对齐时出现问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14104599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problems aligning my logo with the navigation bar
提问by Joe
I've been sat here for 2 hours simply tring to align my logo with the navigation bar so it all fits on one line similar too http://weightshift.com/
我已经在这里坐了 2 个小时，只是尝试将我的徽标与导航栏对齐，这样它们都可以放在一条类似的行上http://weightshift.com/
Im trying too add this image
我也尝试添加此图像
http://imageshack.us/photo/my-images/26/logonkg.png/
http://imageshack.us/photo/my-images/26/logonkg.png/
to align with the navigation bar im using which uses the following CSS, and am really stuck everytime i try to align it the nav bar goes below the header, im creating this on dreamweaver using the responsive framework, help would be greatly appreciated.
要与使用以下 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;
}
With the html currently being
随着 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> </p>
<p> </p>
</body>
采纳答案by Jonathan Eckman
To recreate the header in the example you gave you simply need to add a float: leftto the logo image and float: rightto the ulthat contains your navigation links.
要重新创建你给你只需要添加一个例子中的报头float: left的标志形象，float: right到ul包含您的导航链接。
<img class="left" />
<ul class="right">
<!-- nav links here -->
</ul>
.left { float: left; }
.right { float: right; }
Here is a working jsfiddle. What were you trying to do with #menu-wrap? That is the only thing I took out because I couldnt see what you were trying to do with it and it was breaking the header.
这是一个有效的jsfiddle。你想做#menu-wrap什么？这是我唯一取出的东西，因为我看不到你想用它做什么，而且它破坏了标题。
回答by Adam Grant
In addition to @Simplify's answer, there is more than one way to do this. If you wish to float these items left and right, make sure the total width of the two floated elements do not exceed the width of their container.
除了@Simplify 的答案之外，还有不止一种方法可以做到这一点。如果您希望左右浮动这些项目，请确保两个浮动元素的总宽度不超过其容器的宽度。
Option 1
选项1
JS Fiddle
JS小提琴
HTML
HTML
<div class="container">
<img class="logo" />
<ul class="nav">
<!-- nav links here -->
</ul>
<div style="clear: both"></div>
</div>
CSS
CSS
.container { width: 1000px; }
.logo {
float: left;
width: 300px;
}
.nav {
float: right;
width: 600px;
}
I also added a clear: bothstyled div to ensure any new elements do not "fall into" the float, but move to a new line.
我还添加了一个clear: both样式的 div 以确保任何新元素不会“落入”浮动，而是移动到新行。
Option 2
选项 2
It may be less of a headache to use absolute positioning here. Just make sure you define the container with relative positioning.
在这里使用绝对定位可能不那么令人头疼。只要确保使用相对定位定义容器即可。
JSFiddle
JSFiddle
HTML
HTML
<div class="container">
<img class="logo" />
<ul class="nav">
<!-- nav links here -->
</ul>
<div style="clear: both"></div>
</div>
CSS
CSS
.container {
position: relative;
width: 1000px;
}
.logo, .nav {
position: absolute;
top: 5px;
}
.logo { left: 10px; }
.nav { right: 10px; }
回答by Adam Grant
I would personally move your logo outside the menu. Instead of
我会亲自将您的徽标移到菜单之外。代替
<div id="header">
<div id="menu">
<h1> <img src="images/logo.png"> </h1>
I would do this
我会这样做
<div id="header">
<h1> <img src="images/logo.png"> </h1>
<div id="menu">
That's just personal preference. Next like @Simplify mentioned then you would want to make these elements float left and right like so:
这只是个人喜好。接下来像@Simplify 提到的那样，你会想让这些元素像这样左右浮动：
<div id="header">
<h1>Name of Site<img class="left" src="images/logo.png" alt="" /></h1>
<div id="menu">
You will notice that I put the class left, an alt and closing tag in the image "/" as well. It wouldn't hurt to check your code from time to time with http://validator.w3.org/
你会注意到我把类放在左边，在图像“/”中还有一个 alt 和结束标签。不时使用http://validator.w3.org/检查您的代码不会有什么坏处
Finally you want to add this to your css file.
最后，您想将此添加到您的 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;
}
The text indent will make the h1 text disappear while keeping good seo. Ignore the grey text. Not sure why its doing that :)
文本缩进将使 h1 文本消失，同时保持良好的 seo。忽略灰色文本。不知道为什么这样做:)
Also, I notice you have a set width for your menu as 1200px. I am sure you are wanting the entire width of the page to be this size. In this case you will need to adjust that for your logo to fit in the same line. For example. If your logo is 200px wide you will want to lessen the width of the menu to reflect that including any margin or padding your add. This will allow the logo and menu float side by side. Simply put, you don't want both of these elements to be wider than its main container of 1200px or it will not float side by side.
另外，我注意到您的菜单设置宽度为 1200 像素。我确定您希望页面的整个宽度都是这个大小。在这种情况下，您需要调整徽标以适应同一行。例如。如果您的徽标宽度为 200 像素，您将需要减小菜单的宽度以反映包括任何边距或填充您添加的内容。这将允许徽标和菜单并排浮动。简而言之，您不希望这两个元素都比其主容器 1200 像素宽，否则它不会并排浮动。
You will also need to create a class that clears the floating elements. I like to use .breaker
您还需要创建一个清除浮动元素的类。我喜欢使用 .breaker
.breaker { clear: both; }
Add
添加
<div class="breaker"></div>
after your closing menu tag.
在关闭菜单标签之后。
回答by Lynda Carter
The logo and the navigation have the parent container of, #navigation .stack-width. That stack-width has a width set to 960 pixels. By default, the logo and nav blocks have inherited the width of 100% of the box. They need to have specific widths added to them, so that they can be floated within the parent container. I tend to work on CSS in the browser using Firefox as opposed to logging in to the site and making edits in the Themebuilder. One of the following styles is to override the margin-left that is currently applied to, #navigation-region .content .view-multilingual-menu. Instead of pasting in this part of the CSS, you could just remove the style wherever it has been applied in the Themebuilder. Since the parent container is 960 pixels, the CSS will set the widths as follows. The logo is set to 218 pixels to accomodate the width of the image. The navigtion is set to 728 pixels. Each of the table elements is given a padding of 4 pixels top & bottom and 7 pixels left & right. This is an override of the default theme styles for tables which is usually 4px, 10px. 218px for logo + 728px for the nav + 14px of padding = 960 pixels
徽标和导航具有#navigation .stack-width 的父容器。该堆栈宽度的宽度设置为 960 像素。默认情况下，徽标和导航块继承了框 100% 的宽度。它们需要添加特定的宽度，以便它们可以在父容器中浮动。我倾向于使用 Firefox 在浏览器中处理 CSS，而不是登录站点并在 Themebuilder 中进行编辑。以下样式之一是覆盖当前应用于 #navigation-region .content .view-multilingual-menu 的 margin-left。您可以删除在 Themebuilder 中应用的样式，而不是粘贴到 CSS 的这一部分。由于父容器是 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;
}
