当屏幕大小调整时，我的链接重叠
问题描述：
我为我的网站使用了内联导航栏，但当缩放窗口时出现问题，例如，如果我缩小窗口，则链接填充将显示在页面的反面。如果我把它从窗口一路缩小，如果你将鼠标悬停在一个链接上，它将覆盖在上面。当屏幕大小调整时，我的链接重叠
li{
\t display:inline;
}
ul{
\t list-style-type:none;
\t margin:0;
\t padding:20px 0;
\t overflow: hidden;
\t background-color:#383a3d;
}
a.list:link{
\t font-family: Arial, sans-serif;
\t color:white;
\t text-decoration:none;
\t padding:100% 10%;
}
a.list:hover{
\t background-color:black;
\t color:white;
\t text-decoration:none;
\t font-family: Arial, sans-serif;
}
h1.header{
\t font-family: Arial, sans-serif;
\t text-align:center;
}
body{
\t background-color:#f7f7f7;
}
header, footer{
\t background-color:#ffab3d;
\t padding:30px;
\t margin:0;
}
nav{
\t position:fixed;
\t overflow: hidden;
\t width:100%;
\t margin:0;
}<!Doctype html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <link rel="stylesheet" href="Varistyle.css">
\t </head>
\t
\t <body>
\t \t <header><h1 class="header">Varisent</h1></header>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a class="list" href="#home">Home<a></li>
\t \t \t \t <li><a class="list" href="#about">About Us<a></li>
\t \t \t \t <li><a class="list" href="#service">Services<a></li>
\t \t \t \t <li><a class="list" href="#contact">Contact Us<a></li>
\t \t \t </ul>
\t \t </nav>
\t </body>
</html>
答
您可以在父ul和flex-grow: 1在li的（或flex: 1 0 0的简称）使用display: flex，他们会进行缩放以适合头部的宽度，并没有缩水重叠。
li{
\t flex: 1 0 0;
}
ul{
\t list-style-type:none;
\t margin:0;
\t padding:20px 0;
\t overflow: hidden;
\t background-color:#383a3d;
display: flex;
}
a.list:link{
\t font-family: Arial, sans-serif;
\t color:white;
\t text-decoration:none;
\t padding:100% 10%;
}
a.list:hover{
\t background-color:black;
\t color:white;
\t text-decoration:none;
\t font-family: Arial, sans-serif;
}
h1.header{
\t font-family: Arial, sans-serif;
\t text-align:center;
}
body{
\t background-color:#f7f7f7;
}
header, footer{
\t background-color:#ffab3d;
\t padding:30px;
\t margin:0;
}
nav{
\t position:fixed;
\t overflow: hidden;
\t width:100%;
\t margin:0;
}<!Doctype html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <link rel="stylesheet" href="Varistyle.css">
\t </head>
\t
\t <body>
\t \t <header><h1 class="header">Varisent</h1></header>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a class="list" href="#home">Home<a></li>
\t \t \t \t <li><a class="list" href="#about">About Us<a></li>
\t \t \t \t <li><a class="list" href="#service">Services<a></li>
\t \t \t \t <li><a class="list" href="#contact">Contact Us<a></li>
\t \t \t </ul>
\t \t </nav>
\t </body>
</html>