html - 间隔导航栏？

Question

所以我正在尝试为学校元素创建一个导航栏，但是我无法让所有按钮在整个导航栏上均匀分布。我已经尝试这样做一段时间了，导航栏代码很乱，这对我的情况没有帮助。有什么解决办法吗？

HTML代码是:

<ul>
  <li><a href="homepage.html"> <img src="Images/homepage/logo.png" width="20" height="20" href="#home"> </a></li>
  <div class="other";>
  <li><a href="films.html">Films</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="faq.html">FAQ</a></li>
</div>
</ul>

CSS代码是:

ul {

list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
text-align: center;

}

li {

float: left;
}

li a {

display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
z-index: 1;
width: 100px;
}

li a:hover:not(.active) {
background-color: #111;
}

li a:hover{
text-decoration: none;
color: white;
}

.active {
background-color: #222;
color:white;
}

请帮忙，这让我困惑了一段时间，除非绝对必要，否则我宁愿不编写新的导航栏代码!

Answer 1

使用 flex

ul{ display:flex;}
li{flex:1;}

* {
  margin: 0;
}

ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: 0;
  background-color: #333;
  position: fixed;
  z-index: 1;
  height: 50px;
  line-height: 50px;
  width: 100%;
}

li {
  flex: 1;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

li a:hover:not(.active) {
  background-color: #111;
}

li a:hover {
  text-decoration: none;
  color: white;
}

.active {
  background-color: #222;
  color: white;
}

img {
  margin: -15px;
}

<ul>
  <li>
    <a href="homepage.html"> <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" width="40" height="40px" href="#home"> </a>
  </li>
  <li><a href="films.html">Films</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="faq.html">FAQ</a></li>
  </div>
</ul>