使列表項在調整大小時保持固定位置

Question

假設在可調整大小的div容器中存在無序列表，並且該列表水平佈局並且與右側對齊。 在該列表中，其中一個項目被選爲「特殊」，例如被分配爲id="pinned"。

是否有可能通過CSS的手段才使#pinned項目維持相對於含div而div則在調整位置，讓其他列表中的項目可能會改變周圍的#pinned項目的位置（浮動）？

這裏是我的意思圖片：

Answer 1

是的，你可以做到這一點。如果固定列表項目是列表中的第一個，此代碼纔會起作用。

HTML：

<ul> 
    <li id="pinned">item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
</ul> 

CSS：

ul { 
    background: lightyellow; 
    padding: 10px; 
    text-align: right; 
} 
li { 
    padding: 10px 50px; 
    background: lightblue; 
    display: inline-block; 
    margin: 10px; 
} 
#pinned { 
    float: right; 
    background: lightgreen; 
    margin-left: 14px; 
} 

DEMO