我试图建立一个图像与导航栏水平对齐的网站，但我无法弄清楚如何。我尝试过浮动，但它只是将图片放在导航栏的顶部。也许我做错了？
谢谢！
CSS和HTML -
#logo {
float: left;
width: 550px;
height: 250px;
}
#navbar {
background-color: #E66916;
border: 3px solid #FFFFFF;
width: 800px;
height: 250px;
}
a {
color: #FFF;
font-family: Baumans;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFDAC2;
}
li {
display: inline;
padding: 50px;
}
ul {
text-align: center;
list-style-type: none;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>My Physical Fitness Tracker</title>
<style>
</style>
</head>
<body>
<header>
<img id="logo" src="file:///C:/Documents%20and%20Settings/Owner/Desktop/Commander%20%20Outpost/IMAGES/MPFT.png" alt="Personal Physical Fitness Tracker" />
<div id="navbar">
<nav>
<ul>
<li><a href="#">home</a>
</li>
<li><a href="#">about</a>
</li>
<li><a href="#">myfitness</a>
</li>
<li><a href="#">confidencebooster</a>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
答案 0 :(得分：0)
将display:inline-block设为#logo和#navbar
<强> CSS
#logo {
float: left;
width: 550px;
height: 250px;
display: inline-block;
}
#navbar {
background-color: #E66916;
border: 3px solid #FFFFFF;
width: 800px;
height: 250px;
display: inline-block;
}
<强> DEMO HERE
注意：您需要水平扩展浏览器，因为您的图片和菜单有一个大小......您必须期望！
如果您想强行使用，则必须在white-space:nowrap
header
<强> CSS
header{
white-space:nowrap;
}
<强> DEMO HERE
答案 1 :(得分：0)
上下文http://jsfiddle.net/1f050smo/1/
您可以将#logo和#navbar设置为display: inline-block;
您还需要将vertical-align: top设置为#logo和#navbar元素，因为默认值为基线，这会将#navbar置于{{1}的底部}}
#logo并从#logo,
#navbar {
display: inline-block;
vertical-align: top;
}
#logo