Question

我是HTML的新手，有点菜。我正在使用此导航栏，并且将其背景作为图像（显示在gif中）。导航栏会根据屏幕的大小正确调整大小，但是“菜单”和“与我们联系”似乎无法调整大小。.有人可以帮我这个忙吗？我还计划将“菜单”设置为下拉菜单，但希望可以自己完成。这是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的评论。

对象大小不正确

1 个答案: