2

我的页面上有一个垂直列中的项目列表（形状明智而不是 HTML5 列），我希望一个或多个项目向右移动并基本上退出集合并一直移动回顶部内联。

就像是

<ul>
  <li>
  <li>
  <li>
<ul>

会去

<ul>      <li>
  <li>
  <li>
<ul>

我知道这可以通过绝对位置完成，但它应该以动态方式完成，这样项目将被渲染然后移动，所以我想知道 CSS 领域是否有任何技巧可以做到这一点可能的。抱歉，对这种情况的程度了解有限。可以在 IE7 中运行的纯 javascript（不是 jquery 或其他 lib）解决方案可能会起作用，也许只是一个对具有绝对定位的对象进行计数然后使用计数和高度来确定最高值的解决方案？

感谢您的收听，寻找，也许还有帮助！

PS http://jsfiddle.net/Mutmatt/LpXn5/1/或http://jsfiddle.net/Mutmatt/LpXn5/4/取决于你是否喜欢 div 或列表（我不在乎你是否可以让它工作一种或另一种方式）

4

3 回答 3

2

您已经为列表项指定了固定宽度，因此可以使用以下方法轻松生成：

#list li:first-child {
    position: absolute;
    left: 200px;
    top: 0
}

既然你有一个固定的宽度，我不明白你所说的动态是什么意思？无论如何，这是一个jsFiddle 演示。

于 2013-02-13T14:00:21.533 回答
1

我同意 BenM 的回答，但如果你想把它移到右边，也许你应该试试这个：

#list li:first-child {
    position: absolute;
    right: 0;
}

http://jsfiddle.net/Pf9eQ/

于 2013-02-13T14:03:29.457 回答
0

您可以尝试使用float:right第一个列表项，以及float左侧的其他列表项。

#list {
    display: block;
    width: 500px;
    height: 1000px;
    float: left;
}

#list li:first-child {
    float: right;
}

JS 小提琴示例

于 2013-02-13T14:04:00.097 回答