Question

当窗口变小时，会出现汉堡包菜单。但是我有一个问题，汉堡菜单比它旁边的文本低。

要解决此问题，我尝试将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

Answer 1

只需从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>

Answer 2

不确定我是否正确理解了您的问题，但是这样一来，文字就与汉堡一致：

.header ul {
    text-align: right;
    margin: 0;
    vertical-align: bottom;
}

链接的垂直高度偏移与列表相比

2 个答案:

段