Question

标题说明了一切，我的导航并没有留在我的标题中。我已经运行了css验证器，以确保我的CSS是正确的，它似乎仍然没有按预期运行。这是我的代码，并提前感谢任何帮助我的人。（Ps.如果有任何工具可以帮我找到这样的问题，请告诉我。）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <title></title>
</head>
<body>

<Header>
    <img id="logo" src="img/logo/caseywoelfle.com.svg" alt="Logo"/>
    <nav>
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about me</a></li>
            <li><a href="portfolio.html">portfolio</a></li>
            <li><a href="blog.html">blog</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav>
</Header>

<div id="homepage">

    <div id="banner">

    </div>

</div>

</body>
</html>

/* Header: */
header {
  height: 70px;
  width: 100%;
  background-image: -o-linear-gradient(-89deg, #4ABCD3 0%, #0D0C0C 100%);
  background-image: -moz-linear-gradient(-89deg, #4ABCD3 0%, #0D0C0C 100%);
  background-image: -ms-linear-gradient(-89deg, #4ABCD3 0%, #0D0C0C 100%);
  background-image: linear-gradient(-179deg, #4ABCD3 0%, #0D0C0C 100%); }
  header #logo {
    margin-left: 50px;
    width: 112px;
    height: 100%; }
  header nav {
    width: 448px; }
    header nav ul li {
      display: inline;
      list-style: none; }
      header nav ul li a {
        text-decoration: none;
        font-family: Helvetica;
        font-size: 20px;
        color: #823;
        line-height: 24px;
        /* Nav Text Styles */ }

#homepage #banner {
  border-radius: 29px;
  /* banner background styles */
  background-image: -o-linear-gradient(-89deg, #4ABCD3 0%, #000000 100%);
  background-image: -moz-linear-gradient(-89deg, #4ABCD3 0%, #000000 100%);
  background-image: -ms-linear-gradient(-89deg, #4ABCD3 0%, #000000 100%);
  background-image: linear-gradient(-179deg, #4ABCD3 0%, #000000 100%); }

footer {
  border-radius: 22px;
  /* footer background styles */
  background-image: -o-linear-gradient(-89deg, #378797 0%, #000000 100%);
  background-image: -moz-linear-gradient(-89deg, #378797 0%, #000000 100%);
  background-image: -ms-linear-gradient(-89deg, #378797 0%, #000000 100%);
  background-image: linear-gradient(-179deg, #378797 0%, #000000 100%); }

/*# sourceMappingURL=style.css.map */

Answer 1

在标题中标题是标题的高度，导航位于下方。

你可以漂浮两个：

#logo {float: left;}
nav {float: right} /* or left */

http://jsfiddle.net/cd0oopfv/

标题中的导航is，标题高度为logo + nav。但是没有导航空间。 Nav是块元素，如果你想让一个块靠近另一个块，你必须浮动它们。

Answer 2

您必须将display: inline-block;设置为徽标和导航栏。

header #logo, header nav {
    display: inline-block;
}

小提琴：http://jsfiddle.net/wnr29xe4/

Answer 3

默认情况下nav元素是块级元素。这意味着它需要尽可能多的空间使它在下一行渲染。可能的解决方案是使其成为display: inline-block：

header nav {
    width: 448px;
    display: inline-block;
    vertical-align: top;
}

示例：http://jsfiddle.net/jbo80166/

Answer 4

这里我通过添加一些边距和浮动来改变徽标和导航样式

 /* Header: */
header {
  height: 70px;
  width: 100%;
  float: left;
  background-image: -o-linear-gradient(-89deg, #4ABCD3 0%, #0D0C0C 100%);
  background-image: -moz-linear-gradient(-89deg, #4ABCD3 0%, #0D0C0C 100%);
  background-image: -ms-linear-gradient(-89deg, #4ABCD3 0%, #0D0C0C 100%);
  background-image: linear-gradient(-179deg, #4ABCD3 0%, #0D0C0C 100%); }
  header #logo {
    margin-left: 50px;
    width: 112px;
    height: 100%;
    float:left;
  }
  header nav {
    width: 600px;
    float:left;
    margin-left: 60px;
  }
    header nav ul li {
      display: inline;
      list-style: none;
      margin-left: 20px;
    }
      header nav ul li a {
        text-decoration: none;
        font-family: Helvetica;
        font-size: 20px;
        color: #823;
        line-height: 24px;
        /* Nav Text Styles */ }

#homepage #banner {
  border-radius: 29px;
  /* banner background styles */
  background-image: -o-linear-gradient(-89deg, #4ABCD3 0%, #000000 100%);
  background-image: -moz-linear-gradient(-89deg, #4ABCD3 0%, #000000 100%);
  background-image: -ms-linear-gradient(-89deg, #4ABCD3 0%, #000000 100%);
  background-image: linear-gradient(-179deg, #4ABCD3 0%, #000000 100%); }

footer {
  border-radius: 22px;
  /* footer background styles */
  background-image: -o-linear-gradient(-89deg, #378797 0%, #000000 100%);
  background-image: -moz-linear-gradient(-89deg, #378797 0%, #000000 100%);
  background-image: -ms-linear-gradient(-89deg, #378797 0%, #000000 100%);
  background-image: linear-gradient(-179deg, #378797 0%, #000000 100%); }

我的导航不是我的想法

4 个答案:

示例：http://jsfiddle.net/jbo80166/