Question

我希望我的徽标，说明文字和导航栏都位于我网站顶部的同一行。他们不会对齐，我不能为我的生活弄清楚原因。它们都在同一条线上，但描述文本的位置低于其余部分。填充和边距似乎没有什么区别。

/* 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;
}

Answer 2

<强> CSS

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

<强> HTML

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

链路： - http://www.w3schools.com/css/css_navbar.asp

Answer 3

好吧，我删除了段落，只是使用flexbox来获得平滑且反应灵敏的标题：

<div class="header">
<div id="title">
    <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>
</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：

/* Title Area */

.header {
  display: flex;
  justify-content: space-between;
}

#title {
  display: flex;
  align-items: center;
}

.sep {
padding: 20px;
}

.desc {
padding: 20px 0px;
}

/*Topnav */

.nav-primary {
  display: flex;
  align-items: center;
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;}

您可以阅读有关flexbox here

的更多信息

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

3 个答案: