html - h2 在移动设备上强加导航栏崩溃

Question

当我在智能手机上查看我的 HTML 页面时，导航栏被我的“navbar-collapse”的“h2”和“img”强加。

我不明白为什么会这样。有人有什么建议吗？

这是html代码:

  <nav class="navbar navbar-default" id="my-navbar">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="index.html" class="navbar-brand">J</a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="profile/index.html">profile</a>
      <li><a href="work/index.html">work</a>
      <li><a href="resume/index.html">resume</a>
    </ul>
  </div>
</div>

CSS

    .navbar-default {
  height: 5em;
  background-color: #fff;
  border: transparent;
  border-radius: 0;
}

nav .navbar-header a {
  padding: 0.5em 0 0 1em;
  font-size: 3em;
}

#navbar-collapse {
  background: #fff;
  z-index: 1;
}

.navbar-nav {
  padding-top: 0.5em;
  float: right;
  z-index: 2;
}

.navbar-nav ul {
  z-index: 2;
}

这里是 'img' 以获得更好的引用:

Answer 1

你还没有关闭li。请关闭检查。也可以通过搜索文本“你好，我是贾斯汀”来检查