Navbar的空间？

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>

Answer 2

1. 您只能在li元素中嵌套ul个元素。在div内嵌套ul在语义上不正确。此外，div中错误嵌套的ul元素在其类名后面还有一个分号：这不合法。
2. 弹性盒模块是最佳选择，可以实现您的目标。您可以阅读更多相关信息here。
3. 获得所需结果的一种方法如下：
＆＃13;
＆＃13;
ul,
li,
a, 
img {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  border: 0px;
  height: 50px; /* Adjust this value to whatever height you want your nav to be */
}
ul {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  list-style-type: none;
  background-color: #333;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
ul li {
 flex: 0 1 100%;
}
ul li a{
  display: block;
  color: white;
  text-decoration: none;
  line-height: 50px; /* This value should be the same as your nav's height is in order for text to stay centered. */
  padding: 0px 1em;
}
ul li a img {
  height: 100%;
  width: auto;
  padding: 5px; /*You can adjust this value to whatever you want. */
}
li a:hover:not(.active) {
  background-color: #111;
}
li a:hover{
  text-decoration: none;
  color: white;
}
.active {
  background-color: #222;
  color:white;
}
＆＃13;
<ul>
  <li><a href="homepage.html"> <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_White.png" 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>
</ul>
＆＃13;
＆＃13;
＆＃13;

我希望这会有所帮助。