将我的徽标与导航栏对齐时出现问题 [英] Problems aligning my logo with the navigation bar
问题描述
我已经坐在这里2个小时了，只是想将我的徽标与导航栏对齐，所以它们也都可以放在一行上，类似 http://weightshift.com/
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/
我也尝试添加此图片
http://imageshack.us/photo/my-images/26/logonkg.png/
要与导航栏对齐，即时通讯使用的是以下CSS，每次我尝试对齐导航栏时，它都会卡住，导航栏位于标题下方，即时通讯使用响应框架在Dreamweaver上创建，将不胜感激
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.
#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> </p>
<p> </p>
</body>
推荐答案
要重新创建示例中的标题，您只需要在徽标图像和中添加到包含导航链接的 float:left 浮动:右键 ul .
To recreate the header in the example you gave you simply need to add a float: left to the logo image and float: right to the ul that contains your navigation links.
<img class="left" />
<ul class="right">
<!-- nav links here -->
</ul>
.left { float: left; }
.right { float: right; }
这是一个有效的 jsfiddle .您正尝试使用#menu-wrap 做什么?那是我唯一拿出的东西，因为我看不到您要使用它做什么，并且它破坏了标题.
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.
这篇关于将我的徽标与导航栏对齐时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
