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

Question

假设在可调整大小的 div 容器中有一个无序列表，并且该列表水平放置并右对齐。在该列表中，其中一项被选为 "special"，例如被分配 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

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

Make a list item maintain fixed position on resize

html

css

layout