Html CSS 向右和向上移动多个列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14855157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS move multiple list item to the right and up
提问by Mutmatt
I have a list of items on my page that are in a vertical column (shape wise not HTML5 column) and I want one or many of the items to move to the right and essentially drop out of the set and move all the way back to the top inline.
我的页面上有一个垂直列（形状明智而不是 HTML5 列）中的项目列表，我希望其中一个或多个项目向右移动并基本上退出集合并一直移回顶部内联。
Something like
就像是
<ul>
<li>
<li>
<li>
<ul>
would go to
会去
<ul> <li>
<li>
<li>
<ul>
I know this can be done with an absolute position but it is supposed to be done in dynamic fashion, such that the items will be rendered and then moved, so I was wondering if there is any trick out there in CSS land that can make this possible. Sorry for the limited knowledge of the extent of the situation. A pure javascript (not jquery or other lib) solution that would work in IE7 could potentially work, maybe just a solution that does a count on object that have an absolute positioning and then uses the count and height to determine the top value?
我知道这可以用绝对位置来完成，但它应该以动态方式完成，这样项目将被渲染然后移动，所以我想知道在 CSS 领域是否有任何技巧可以做到这一点可能的。抱歉，对情况的程度了解有限。一个可以在 IE7 中工作的纯 javascript（不是 jquery 或其他 lib）解决方案可能会工作，也许只是一个对具有绝对定位的对象进行计数然后使用计数和高度来确定最高值的解决方案？
Thanks for listening, looking, and maybe helping!
感谢您的聆听、观看，也许还可以提供帮助！
P.S. http://jsfiddle.net/Mutmatt/LpXn5/1/or http://jsfiddle.net/Mutmatt/LpXn5/4/depending on if you like divs or lists (i don't care if you can make it work one way or the other)
PS http://jsfiddle.net/Mutmatt/LpXn5/1/或http://jsfiddle.net/Mutmatt/LpXn5/4/取决于你是否喜欢 div 或列表（我不在乎你是否可以让它工作一种或另一种方式）
采纳答案by BenM
You've indicated a fixed width for the list items, so this can be easily generated using:
您已经为列表项指定了固定宽度，因此可以使用以下方法轻松生成：
#list li:first-child {
position: absolute;
left: 200px;
top: 0
}
Since you have a fixed width, I don't understand what you mean by dynamic? Anyway, here's a jsFiddle demo.
既然你有固定的宽度，我不明白你说的动态是什么意思？不管怎样，这里有一个jsFiddle 演示。
回答by TKrugg
I agree with BenM's answer but if you want to move it to the right, maybe you should try this instead:
我同意 BenM 的回答，但如果你想把它移到右边，也许你应该试试这个：
#list li:first-child {
position: absolute;
right: 0;
}
回答by JSW189
You could try using float:rightfor the first list item, and floatthe other list items to the left.
您可以尝试使用float:right第一个列表项，以及float左侧的其他列表项。
#list {
display: block;
width: 500px;
height: 1000px;
float: left;
}
#list li:first-child {
float: right;
}
