html - 为什么我的文字与图片不一致？

Question

我希望我的 Logo 、描述文本和导航栏都位于网站顶部的同一行。他们不会对齐，我无法为我的生活找出原因。它们都在同一条线上，但描述文字的位置低于其他文字。填充和边距似乎没有什么不同。

/* Title Area */

#title {
  float: left;
}
.sep {
  padding: 20px;
}
.desc {
  padding: 20px 0px;
}
/*Topnav */

.nav-primary {
  float: right;
  margin-top: 1px;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  display: inline-block;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
ul.topnav li a:hover {
  background-color: floralwhite;
}

<div class="header">
  <div id="title">
    <p>
      <img src="http://i1379.photobucket.com/albums/ah150/beccaday02/blog%20title_zpsi4lf0fqz.png" />
      <span class="sep">|</span>
      <span class="desc">Help For The Undomesticated Homemaker</span>
    </p>
  </div>
  <nav class="nav-primary">
    <ul class="topnav" id="myTopnav">
      <li><a href="http://www.nappiesandnailpolish.com/p/start-here.html">Start Here</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/write-for-us.html">Write For Me</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/advertise.html">Advertise</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/contact.html">Contact</a>
      </li>
    </ul>
  </nav>
</div>

Answer 1

.header:after {
      content: '';
      display: block;
      clear: both;
    }
    
    #title {
      float: left;
    }
    
    #title p {
      margin: 0;
    }
    
    #title p > * {
      display: inline-block;
      vertical-align: middle;
    }
    
    .nav-primary {
      float: right;
    }
    
    .nav-primary ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .nav-primary ul li {
      float: left;
      padding-right: 15px;
      line-height: 40px;
    }

<div class="header">
  <div id="title">
    <p>
      <img src="http://i1379.photobucket.com/albums/ah150/beccaday02/blog%20title_zpsi4lf0fqz.png" />
      <span class="sep">|</span>
      <span class="desc">Help For The Undomesticated Homemaker</span>
    </p>
  </div>
  <nav class="nav-primary">
    <ul class="topnav" id="myTopnav">
      <li><a href="http://www.nappiesandnailpolish.com/p/start-here.html">Start Here</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/write-for-us.html">Write For Me</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/advertise.html">Advertise</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/contact.html">Contact</a>
      </li>
    </ul>
  </nav>
</div>

我已经使用基本设置修改了您的 CSS，将所有内容对齐在一行中，按照您的意愿进行其余修饰

.header:after {
  content: '';
  display: block;
  clear: both;
}

#title {
  float: left;
}

#title p {
  margin: 0;
}

#title p > * {
  display: inline-block;
  vertical-align: middle;
}

.nav-primary {
  float: right;
}

.nav-primary ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.nav-primary ul li {
  float: left;
  padding-right: 15px;
  line-height: 40px;
}