Question

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

//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>

Answer 1

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

当我停留在布局上而无法正确放置时，我首先在每个元素上添加边框。通过这种方式，您可以看到页面上每个元素的间距，并基于此开始调整CSS属性以将项目放置在其位置。显然，您使用CSS的次数越多，它越容易获得。对布局感到满意之后，我便删除了边框。

我所做的调整：

将标头设为全角，使其覆盖页面的整个宽度
将徽标的页面宽度设置为20％。
剩余空间80％被菜单占据
然后每个列表项被允许占用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>

网页无法适应浏览器窗口大小

1 个答案: