时间戳

首页 > 解决方案 > 网页不会适应浏览器窗口大小

html - 网页不会适应浏览器窗口大小

问题描述

我正在从头开始制作一个网站，而我目前拥有的只是 NAV 栏。但我想在继续开发之前我会解决这个问题。每当我最小化浏览器时，我的导航栏都不会保持在一条直线上。我已经包含了下面的代码。我使用的文本编辑器是括号，过去一周我尝试了多种方法，但没有任何效果。

//CSS
body {
  margin: 0;
  background-color: beige;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.container {
  width: 86.5%;
  margin: 0 auto;
}

.header {
  background-color: grey;
  width: 100%;
  top: 0px;
  position: fixed;
}

.header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 0.5%;
}

nav {
  float: right;
  position: relative;
  top: 0px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 99px;
  padding-top: 25px;
  position: relative;
}
//HTML
<!doctype html>
<html>

<head>

  <link href="MPstyle.css" rel="stylesheet" type="text/css">
  <meta charset="UTF-8">
  <title>M/P</title>
</head>

<body>
  <div class="header">
    <div class="container">
      <img src="logo.png" alt="logo" class="logo" width="50" height="50">
      <nav>
        <ul>

          <li> <a href="#">Home</a></li>
          <li> <a href="#">About</a></li>
          <li> <a href="#">Portfolio</a></li>
          <li> <a href="#">Contact</a></li>

        </ul>
      </nav>
    </div>
  </div>
</body>

标签： htmlcsslayout

解决方案

您可能正在寻找类似的东西。

当我被一个布局卡住并且无法正确处理时，我首先为每个元素添加边框。通过这种方式，您可以看到每个元素在页面上的间距，并基于此我开始调整 CSS 属性以将项目放置在其位置。显然，你使用 CSS 的次数越多，它就越容易。一旦我对布局感到满意，我就会删除边框。

我所做的调整：

  1. 使标题全宽，使其覆盖页面的整个宽度
  2. 给标志 20% 的页面宽度。
  3. 剩余空间 80% 被菜单占用
  4. 然后允许每个列表项占 20%。

如果您调整页面大小，您会看到使用百分比可以正确分配空间。我希望这对您有所帮助，并祝您在页面的其余部分好运。

//CSS
body {
  margin: 0;
  background-color: beige;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.container {
  margin: 0 auto;
}

.header {
  background-color: grey;
  width: 100%;
  top: 0px;
  position: fixed;
  border: 1px solid black;
}

.logo {
  float: left;
  width: 19%;
  border: 1px solid blue;
}

nav {
  float: right;
  position: relative;
  top: 0px;
  width: 80%;
    border: 1px solid yellow;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: center;
}

nav li {
  position: relative;
  display: inline-block;
  width: 20%;
  margin: 1rem 0;
     border: 1px solid red;
}
//HTML
<!doctype html>
<html>

<head>

  <link href="MPstyle.css" rel="stylesheet" type="text/css">
  <meta charset="UTF-8">
  <title>M/P</title>
</head>

<body>
  <div class="header">
    <div class="container">
      <img src="logo.png" alt="logo" class="logo" width="50" height="50">
      <nav>
        <ul>
          <li> <a href="#">Home</a></li>
          <li> <a href="#">About</a></li>
          <li> <a href="#">Portfolio</a></li>
          <li> <a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</body>

推荐阅读