调整屏幕大小时，我的链接重叠

Question

我在网站上使用了内置导航栏，但是在缩放窗口时会出现问题，例如，如果缩小窗口，则链接填充将显示在页面的另一侧。 如果将鼠标悬停在某个链接上，则将其一直缩小到整个窗口，它将覆盖最上面的一个窗口。

 li{ display:inline; } ul{ list-style-type:none; margin:0; padding:20px 0; overflow: hidden; background-color:#383a3d; } a.list:link{ font-family: Arial, sans-serif; color:white; text-decoration:none; padding:100% 10%; } a.list:hover{ background-color:black; color:white; text-decoration:none; font-family: Arial, sans-serif; } h1.header{ font-family: Arial, sans-serif; text-align:center; } body{ background-color:#f7f7f7; } header, footer{ background-color:#ffab3d; padding:30px; margin:0; } nav{ position:fixed; overflow: hidden; width:100%; margin:0; } 

 <!Doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="Varistyle.css"> </head> <body> <header><h1 class="header">Varisent</h1></header> <nav> <ul> <li><a class="list" href="#home">Home<a></li> <li><a class="list" href="#about">About Us<a></li> <li><a class="list" href="#service">Services<a></li> <li><a class="list" href="#contact">Contact Us<a></li> </ul> </nav> </body> </html> 

Answer 1

您可以在父级ul上使用display: flex ，在li上使用flex-grow: 1 （或flex: 1 0 0 ），它们将缩放以适合标题的宽度，并缩小而不会重叠。

 li{ flex: 1 0 0; } ul{ list-style-type:none; margin:0; padding:20px 0; overflow: hidden; background-color:#383a3d; display: flex; } a.list:link{ font-family: Arial, sans-serif; color:white; text-decoration:none; padding:100% 10%; } a.list:hover{ background-color:black; color:white; text-decoration:none; font-family: Arial, sans-serif; } h1.header{ font-family: Arial, sans-serif; text-align:center; } body{ background-color:#f7f7f7; } header, footer{ background-color:#ffab3d; padding:30px; margin:0; } nav{ position:fixed; overflow: hidden; width:100%; margin:0; } 

 <!Doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="Varistyle.css"> </head> <body> <header><h1 class="header">Varisent</h1></header> <nav> <ul> <li><a class="list" href="#home">Home<a></li> <li><a class="list" href="#about">About Us<a></li> <li><a class="list" href="#service">Services<a></li> <li><a class="list" href="#contact">Contact Us<a></li> </ul> </nav> </body> </html>