删除最后一个李

Question

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

之间的空格

这是Demo

<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>