【发布时间】：2021-03-16 05:47:41
【问题描述】：
我有一个 flexbox 导航栏，我在尝试做出响应时遇到了很大的麻烦（因此提出了问题）。我希望链接之间的水平填充随着页面宽度的减小而减小。主要问题是我无法阻止最后的联系我们链接在缩小时被浏览器窗口覆盖，如下图所示。
我也很好奇这是否可能在不使用媒体查询的情况下实现，或者我是否试图让事情变得困难。
希望比我有更多知识的人可以提供帮助，因为我在这方面花了太多时间啊哈。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/CSS/style.css" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li><a href="./index.html">Home</a></li>
<li><a href="./merchandise.html">Merchandise</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contactUs.html">Contact Us</a></li>
</ul>
</nav>
</header>
<div class="flex-container">
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque
asperiores veritatis dicta ipsum! Enim cupiditate laborum voluptatem
ipsa incidunt optio nulla facilis natus?
</p>
</div>
</body>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
</div>
</html>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 0;
background-color: #ddf2eb;
align-items: center;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
flex-shrink: 0;
margin-left: 2%;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
min-width: 0;
min-height: 0;
max-width: 800px;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}
【问题讨论】：
-
justify-content: space-between;