如何对齐图像和无序列表

Question

我正在尝试制作一个图像与导航栏水平对齐的网站，但我不知道该怎么做。我试过浮动，但它所做的只是将图片 放在导航栏的顶部 上。也许我做错了？

谢谢！

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>

Answer 1

将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

注意：您需要水平展开浏览器，因为您的图像和菜单有一定的尺寸......您必须预料到这一点！

如果你想强制它，你必须在 header

上设置 white-space:nowrap

CSS

header{
white-space:nowrap;
}

DEMO HERE

Answer 2

Fiddle 上下文 http://jsfiddle.net/1f050smo/1/

您可以将#logo和#navbar设置为display: inline-block;

您还需要将 vertical-align: top 设置为 #logo 和 #navbar 元素，因为默认值为基线，这会将 #navbar 放在 #logo.

#logo,
#navbar {
    display: inline-block;
    vertical-align: top;
}

并从 #logo

中删除浮动

#logo {
    width: 500px;
    height: 250px;
}

如何对齐图像和无序列表

How to align images and unordered list

html

css

css-float