除了一個元素以外的所有東西都以中心爲導航條右移

Question

我試圖將4個元素放在彼此的旁邊，並且有一個浮動的元素和一個靈活的解決方案。

最好的結果是，如果我在哪裏調整我的瀏覽器，浮動將保持放置，4個元素將佔用所有剩下的空間，直到沒有剩餘空間。

我一直在試圖找到一個非靈活的解決方案，沒有希望做到動態的東西。

要麼我忽略了對此的無知答案，要麼這是不可能的。

我可以完成調整我的代碼，甚至添加JS/JQuery解決方案 - 我真的不介意。

感謝所有幫助:)

Answer 1

這裏有兩個選擇，一個使用浮動和第二使用絕對定位。

在第一種情況下，居中考慮了浮動元素的寬度。

在第二種情況下，居中是相對於父元素的寬度。

通過在一組inline-block子元素上使用text-align: center來實現居中。

.nav { 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: auto; 
 
    text-align: center; 
 
    border: 1px dotted blue; 
 
    position: relative; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
    border: 1px dotted blue; 
 
} 
 
.rightfloat { 
 
    float: right; 
 
} 
 
.rightpos { 
 
    position: absolute; 
 
    right: 0; 
 
}

<p>Ex 1:</p> 
 
<ul class="nav"> 
 
    <li class="rightfloat">Right Most</li> 
 
    <li>First</li> 
 
    <li>Second</li> 
 
    <li>Third</li> 
 
    <li>Fourth</li> 
 
</ul> 
 

 
<p>Ex 2:</p> 
 
<ul class="nav"> 
 
    <li class="rightpos">Right Most</li> 
 
    <li>First</li> 
 
    <li>Second</li> 
 
    <li>Third</li> 
 
    <li>Fourth</li> 
 
</ul>