html - 对象未正确调整大小

Question

我是 HTML 的新手，有点菜鸟。 我有这个我正在处理的导航栏，我把它的背景作为图像(显示在 gif 中)。导航栏会根据屏幕大小适当调整大小，但“菜单”和“联系我们”似乎无法很好地调整大小。有人可以帮我解决这个问题吗？我还计划将“菜单”设为下拉菜单，但我希望可以自己完成。 这是动图: https://i.gyazo.com/239672fae87ceffb09e66f2da9faa680.gif

main {
  width: 100% min-height: 100%;
}

.NavigationBar {
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 5px;
  color: rgba(117, 117, 117, 1);
  box-shadow: 5px 10px 20px -20px rgba(85, 172, 238, 1);
  background: url(WiderLogo.png);
  background-size: 100% auto;
  height: 9em;
  background-repeat: no-repeat;
  position: relative;
}

ul.NavigationBar {
  font-size: 30px;
  padding: 0;
  list-style: none;
}

ul.NavigationBar li {
  margin: 20px;
  margin-top: 37px;
  color: #353535;
}

.menu {
  float: left;
}

.contact {
  float: right;
}

<ul class="NavigationBar" role="navigation">
  <li class="menu"><i class="fa fa-chevron-circle-down"></i> Menu</li>
  <li class="contact"><i class="fa fa-users"></i> Contact Us</li>
</ul>

谢谢!

Answer 1

This可以帮助您回答，因为这是一个类似的问题。

您还缺少一个“;”在

的 CSS 代码的第二行末尾

main {
width: 100%
min-height: 100%;
}

编辑:删除了有关缺少单位定义的部分。感谢@Lars Beck 的评论。