Html 使列表项在调整大小时保持固定位置

假设在一个可调整大小的

div

容器中有一个无序列表，该列表水平排列并向右对齐。 在该列表中，其中一个项目被选择为“特殊”，例如分配了

id=“pinted”

在调整

div

的大小时，是否可以仅通过CSS使

#pinted

项保持其相对于包含

div

的位置，以便其他列表项可以更改其在

#pinted

项周围的位置（浮动）

以下是我的意思：

---

是的，你可以这样做。仅当固定的列表项位于列表中的第一个时，此代码才起作用

HTML:

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

---

非常巧妙地使用浮点数。

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