刪除最後一個後調整菜單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上述刪除3210應該得到調整和佔用的<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>