html - 链接与列表的垂直高度偏移

当窗口变小时，将出现汉堡菜单。但是我有一个问题，汉堡菜单的位置低于其旁边的文本。

为了解决这个问题，我尝试将vertical align应用于整个header，但没有任何改变。如何使文本和汉堡位于相同的垂直高度，而不是汉堡稍低。

我试过的

.header {
  padding: 20px;
  margin-bottom: 20px;
  vertical-align: bottom;
}

完整代码：

* {
  box-sizing: border-box;
}
body {} ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  color: #268bd2;
}
input,
textarea,
label {
  display: block;
}
input,
textarea {
  padding: 5px 10px;
  margin-bottom: 15px;
}
label {
  margin-bottom: 5px;
}
.text {
  width: 300px;
}
h1,
h2 {
  display: block;
  color: #F0652F;
}
h1 {
  font-size: 1.2em;
  margin-bottom: 1.2em;
}
h2 {
  margin-bottom: 0.6em;
  margin-top: 0.6em;
}
p {
  display: block;
}
.header {
  padding: 20px;
  margin-bottom: 20px;
  vertical-align: bottom;
}
.header ul {
  text-align: right;
}
.header ul li {
  display: inline
}
.header ul li:first-child {
  float: left
}
.header ul li:not(:first-child) {
  margin-left: 10px;
}
.main {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
#home span {
  font-size: 24px;
  display: block;
  color: #F0652F;
}
.nav {
  display: inline-block;
}
.nav li {
  display: inline-block;
}
.nav .inactive {
  display: none;
}
.burger {
  margin-left: 10px;
  display: inline-block;
  font-weight: bold;
}
/* Desktop */

@media (min-width: 680px) {
  .nav .inactive {
    display: inline-block;
  }
  .nav .active {
    color: #268bd2;
  }
  .burger {
    display: none;
  }
}

<div class="header">
  <ul class="nav">
    <li class="active"><a href="#">Dashboard</a>
    </li>
    <li class="inactive"><a href="#">A</a>
    </li>
    <li class="inactive"><a href="#">B</a>
    </li>
  </ul>
  <a href="#" class="burger">&#9776;</a>
</div>
<div class="main adminlist">
  <div class="adminnav">

  </div>
  test
</div>

Fiddle

最佳答案

只需从float:left删除.header ul li:first-child

片段

* {
  box-sizing: border-box;
}
body {} ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  color: #268bd2;
}
input,
textarea,
label {
  display: block;
}
input,
textarea {
  padding: 5px 10px;
  margin-bottom: 15px;
}
label {
  margin-bottom: 5px;
}
.text {
  width: 300px;
}
h1,
h2 {
  display: block;
  color: #F0652F;
}
h1 {
  font-size: 1.2em;
  margin-bottom: 1.2em;
}
h2 {
  margin-bottom: 0.6em;
  margin-top: 0.6em;
}
p {
  display: block;
}
.header {
  padding: 20px;
  margin-bottom: 20px;
  vertical-align: bottom;
}
.header ul {
  text-align: right;
}
.header ul li {
  display: inline
}
.header ul li:first-child {
 /* float: left * remove this */
}
.header ul li:not(:first-child) {
  margin-left: 10px;
}
.main {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
#home span {
  font-size: 24px;
  display: block;
  color: #F0652F;
}
.nav {
  display: inline-block;
}
.nav li {
  display: inline-block;
}
.nav .inactive {
  display: none;
}
.burger {
  margin-left: 10px;
  display: inline-block;
  font-weight: bold;
}
/* Desktop */

@media (min-width: 680px) {
  .nav .inactive {
    display: inline-block;
  }
  .nav .active {
    color: #268bd2;
  }
  .burger {
    display: none;
  }
}

<div class="header">
  <ul class="nav">
    <li class="active"><a href="#">Dashboard</a>
    </li>
    <li class="inactive"><a href="#">A</a>
    </li>
    <li class="inactive"><a href="#">B</a>
    </li>
  </ul>
  <a href="#" class="burger">&#9776;</a>
</div>
<div class="main adminlist">
  <div class="adminnav">

  </div>
  test
</div>

关于html - 链接与列表的垂直高度偏移，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34067914/