如何调整导航栏 HTML 的缩放比例

Question

当我放大页面时，导航栏搞砸了，一些选项低于其他选项。

.CSS

.mySlides {display:none;}
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
li a {
display: block;
color: white;
text-align: center;
padding: 17px 40px;
text-decoration: none;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li {
float: left;
}
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00cc66;
position: fixed;
top: 0;
width: 100%;
}
li a:hover:not(.active) {
background-color: #66ff66;
transition: 1s;
}

.HTML

<ul>
<li><a  href="home.html">HOME</a></li>
<li><a href="#news">NEWS</a></li>
<li><a href="#contact">CONTACTS</a></li>
<li><a href="#about">ABOUT</a></li>
</ul>

我如何防止这种情况发生在这种情况和其他具有更多元素(如图像(的场合中？ 我是否需要包含一些库，如 Bootstrap，或者我只需要更改我的 CSS？

Answer 1

将ul宽度设置为 100%，将li宽度设置为 25% 将使其调整为覆盖屏幕。

ul {
width: 100%;
}
li {
width: 25%;
}