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

Question

假设在可调整大小的div容器中有一个无序列表，该列表水平布局并与右侧对齐。 在该列表中，其中一个项目被选为＆＃34;特殊＆＃34;，比如被分配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