时间戳

首页 > 解决方案 > 更改浏览器大小时，导航菜单位于自身内部

html - 更改浏览器大小时，导航菜单位于自身内部

问题描述

当我尝试更改浏览器大小时，导航菜单会“落入”自身，如果这有意义的话。我不完全确定是什么原因造成的。

我试过 max-width ，有时甚至在 div 中添加 ="wrapper" 会搞砸。

@font-face {
  src: url(fonts/Modric.ttf);
  font-family: Modric;
}

@font-face {
  src: url(fonts/Orkney-Regular.ttf);
  font-family: Orkney;
}

@font-face {
  src: url(fonts/Made-Bon-Voyage.otf);
  font-family: Made-Bon-Voyage;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #262c2c;
}

.navbar {
  max-width: 75%;
  height: 100px;
  margin-right: auto;
  margin-left: auto;
}

.navbar a {
  float: left;
  padding: 40px;
  background-color: #262c2c;
  text-decoration: none;
  font-size: 25px;
  width: 25%;
  /* Four links of equal widths */
  text-align: center;
  color: #dae1e7;
  font-family: Orkney;
}

h1 {
  text-align: center;
  font-family: Orkney;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 50%;
  margin-left: auto;
  margin-right: auto;
}

#wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 50px;
  padding-left: 50px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="navigation.css">
  <title>Pasetta Studios</title>
</head>

<body>

  <div id="wrapper">
    <div class="navbar">
      <a href="#index.html">Home</a>
      <a href="#about.html">About</a>
      <a href="#projects.html">Projects</a>
      <a href="#contact.html">Contact</a>
    </div>


    <img src="images/top-image.jpg" alt="plants">
    <img src="images/second-image.jpg" alt="benches">
    <img src="images/third-image.jpg" alt="cactus">
    <img src="images/last-image.jpg" alt="more cactus">
    <img src="images/pasetta-studios" alt="pasetta studios">

    <code>Designed by Pasetta Studios. Built by Abraham.</code>


  </div>
</body>

</html>

标签： htmlcss

解决方案

正如您在评论中所说，删除链接上的填充可以解决问题。发生的情况是，一旦元素变得小于 100 像素（2x50 像素填充），它就会停止变小并包裹（您所描述的在 CSS 中称为包裹）到下一行。无论如何，填充都是多余的，因为您要使文本居中。

我添加了一个溢出：隐藏到 .navbar 以使其环绕浮动链接。

我还为正文中的所有内容添加了轮廓，以使元素更易于查看，以用于演示/开发目的。这也可以通过在浏览器中使用 F12 开发人员工具来实现。

body * {
outline: 1px solid red;
}

body {
  background-color: #262c2c;
}

.navbar {
  max-width: 75%;
  height: 100px;
  margin: auto;
  overflow: hidden;
}

.navbar a {
  float: left;
  padding: 40px 0;
  background-color: #262c2c;
  text-decoration: none;
  font-size: 25px;
  width: 25%;
  /* Four links of equal widths */
  text-align: center;
  color: #dae1e7;
}
#wrapper {
  max-width: 1000px;
  margin: auto;
  padding: 0 50px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="navigation.css">
  <title>Pasetta Studios</title>
</head>

<body>

  <div id="wrapper">
    <div class="navbar">
      <a href="#index.html">Home</a>
      <a href="#about.html">About</a>
      <a href="#projects.html">Projects</a>
      <a href="#contact.html">Contact</a>
    </div>
  </div>
</body>

</html>

如果你正在学习，这是一个很好的开始，如果不是有点过时的话。现在大多数人会使用如下所示的flexbox：

body * {
outline: 1px solid red;
}

body {
  background-color: #262c2c;
}

.navbar {
  margin: auto;
  max-width: 75%;
  
  /* Added: */
  display: flex;
}

.navbar a {
  background-color: #262c2c;
  text-decoration: none;
  font-size: 25px;
  /* Four links of equal widths */
  text-align: center;
  color: #dae1e7;
  
  /* Added: */
  line-height: 100px; /* Effectively centers the text vertically. */
  flex: 1; /* Tells the links to expand horizontally. */
}

#wrapper {
  max-width: 1000px;
  margin: auto;
  padding: 0 50px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="navigation.css">
  <title>Pasetta Studios</title>
</head>

<body>

  <div id="wrapper">
    <div class="navbar">
      <a href="#index.html">Home</a>
      <a href="#about.html">About</a>
      <a href="#projects.html">Projects</a>
      <a href="#contact.html">Contact</a>
    </div>
  </div>
</body>

</html>

推荐阅读