我正在尝试制作一个图像与导航栏水平对齐的网站，但我不知道该怎么做。我试过 float ，但它所做的只是将图片放在导航栏的顶部。也许我做错了？
谢谢!
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>最佳答案
将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;
}
注意:您需要水平展开浏览器，因为您的图像和菜单有一定的尺寸......您必须预料到这一点!
如果你想强制它，你必须在 header 上设置 white-space:nowrap
CSS
header{
white-space:nowrap;
}
关于html - 如何对齐图像和无序列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31520603/