需要帮助在 html 和 CSS 上构建导航栏

Question

我是 HTML 和 CSS 新手。 我正在尝试制作一个网站，我从导航栏开始，但是这个导航栏对于每个屏幕侧都不是“可扩展的”，当它在全屏上时很好，但是当我最小化它时，它不会加载该部分右侧是“关于”。所有菜单都指向同一页面，这就是目前的目标。

这是代码：

body {}

.navbardiv {}

.navbar_ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow:hidden;*/
  background-color: #333;
  border: 5px solid gray;
  margin: -8px;
  width: auto;
  min-width: 600px;
  height: 70px;
}

li {
  float: left;
  padding: 10px 150px;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

<!--NAVBAR-->
<div class="navbardiv">
  <ul class="navbar_ul">
    <li class="navbar_li_Contact"><a href="index.html">Contact</a></li>
    <li class="navbar_li_WebHosting"><a href="index.html">Webhosting</a></li>
    <li class="navbar_li_About"><a href="index.html">About</a></li>
  </ul>
</div>

Answer 1

您将 li 的内边距设置为

150px

，该值非常高，您需要减少。

但是如果您希望链接占据整个宽度并均匀分布，那么您可以使用弹性框和

justify-content: space-between;

参见代码片段：

body {}

.navbardiv {}

.navbar_ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow:hidden;*/
  background-color: #333;
  border: 5px solid gray;
  margin: -8px;
  width: auto;
  min-width: 600px;
  height: 70px;
  display: flex;
  justify-content: space-between;
}

li {
  float: left;
  padding: 10px 20px;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

<!--NAVBAR-->
<div class="navbardiv">
  <ul class="navbar_ul">
    <li class="navbar_li_Contact"><a href="index.html">Contact</a></li>
    <li class="navbar_li_WebHosting"><a href="index.html">Webhosting</a></li>
    <li class="navbar_li_About"><a href="index.html">About</a></li>
  </ul>
</div>

Answer 2

由于

min-width: 600px;

部分，您的导航栏没有响应。这个功能的作用是，当屏幕分辨率宽度低于 600 像素时，它会将导航栏保持在 600 像素。因此，它将它与屏幕的最左边部分对齐，这会给你留下一个裁剪后的右边缘。

min-width:100%;

也不会工作，因为当导航栏的内部元素不适合时它会开始裁剪。

解决这个问题很容易。只需将其更改为

width:100%;

即可。