jquery - 删除最后一个Li后调整菜单

Question

我正在创建一个导航，其中有 4 个 <li>但它的计数不是固定的它可以是 3 或 2 但我希望它的间距应该得到调整并调整 <li> 之间的空间并占据全<ul>宽度

这是演示

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Registr</a></li>
</ul> 

https://jsfiddle.net/sb0crovd/

假设寄存器从上面的例子中删除然后剩下 3 <li>应该调整并占据 <ul> 的整个宽度

请帮我解决这个问题，我需要同样的 JS 插件吗？

谢谢，尼基塔

Answer 1

为您提供几个布局选项。

显示表格

ul {
    padding: 0 2%;
    width: 96%;
    height: 60px;
    margin:0;
    background:red;
}
li {
    list-style: none;
}
a {
    font-size: 15px;
    display: block;
    padding: 15px 0;
    text-decoration:none;
    color:#ffffff;
}
.table {
    display: table;
    table-layout: fixed;
    text-align: center;
}
.table li {
    display: table-cell;
}

<ul class="table">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
      <li><a href="#">Location</a>
    </li>
</ul>

<ul class="table">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
</ul>

显示柔性

ul {
  padding: 0 2%;
  width: 96%;
  height: 60px;
  margin: 0;
  background: red;
}
li {
  list-style: none;
}
a {
  font-size: 15px;
  display: block;
  padding: 15px 0;
  text-decoration: none;
  color: #ffffff;
}
.flex {
  display: flex;
}
.flex li {
  flex: 1;
  text-align: center;
}

<ul class="flex">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
  <li><a href="#">Location</a>
  </li>
</ul>

<ul class="flex">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>