Question

我的页面上有一个项目列表，这些项目位于垂直列（形状明确而不是HTML5列）中，我希望一个或多个项目向右移动并基本上退出设置并移动所有项目返回顶部内联的方式。

像

这样的东西

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

会去

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

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

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

P.S。 http://jsfiddle.net/Mutmatt/LpXn5/1/或http://jsfiddle.net/Mutmatt/LpXn5/4/取决于您是否喜欢div或列表（我不在乎您是否可以使其以某种方式工作）

Answer 1

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

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

由于你有一个固定的宽度，我不明白你的动态是什么意思？无论如何，这是一个jsFiddle demo。

Answer 2

我同意BenM的答案，但是如果你想将它移到右边，也许你应该尝试这样做：

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

http://jsfiddle.net/Pf9eQ/

Answer 3

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

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

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

JS Fiddle Example

CSS向右和向上移动多个列表项

3 个答案: