0
自分のウェブサイトにインラインナビゲーションバーを使用しましたが、ウィンドウのサイズを変更すると問題が発生します。たとえば、ウィンドウを縮小するとページの反対側。あなたがリンク上にマウスを置くと、ウィンドウ全体を窓の全部に収縮させると、上のものをカバーします。あなたはli年代（略してflex: 1 0 0）に親ulとflex-grow: 1にdisplay: flexを使用することができ、彼らは、ヘッダの幅に合わせて拡大縮小、およびなしで縮小ます画面のサイズが変更されたときにリンクが重複する
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>