Question

我有一个UL html列表，如下所示：

<div id="scroller">
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
            </ul>
</div>

我有一个名为“selected”的css类：

.selected {
    margin-left: 0px; 
    position: relative; 
    left: 0px;
}

当我将第二个项目的类设置为“selected”时，我希望第二个元素将第一个元素推出并将其自身移动到屏幕顶部，但这不会发生。有什么我需要添加到“选定”类来实现这一目标吗？ “li”的width属性设置为50％。

以下是示例代码：http://jsfiddle.net/Lx6tw/

Answer 1

这是CSS课程的作用：

.selected {
    margin-left: 0px;    //make left margin 0px
    position: relative;  //keep the element exactly where it was...
    left: 0px;           //EXCEPT move it 0px to the right
}

当我将第二项的类设置为“选中”时，我期待将第一个元素推出并向左移动的第二个元素屏幕但不会发生。

要使元素“自动移动到屏幕左侧”，如果您只想将其移动一定量，则可以执行此操作：

.selected {
    margin-left: 0px;    //make left margin 0px
    position: relative;  //keep the element exactly where it was...
    left: 50px;          //EXCEPT move it 50px to the right, AKA don't move it at all
}

我不完全确定'推出第一个元素'是什么意思，因为文档后面出现的元素的位置不会影响前面出现的元素，除非你在第一个元素上使用CSS位置。这可能是你正在寻找的东西：

.item1 {           //give this class to the item you want pushed out (the first one)
    position: absolute;  //take it out of the document flow
    left: 50px;          //and put it 50px from the left edge of its containing element
}

然而，很难说这是否与您真正想要的相近。您能否更详细地描述您想要的内容，或者链接到展示所需行为的网站？：d

Answer 2

您将position: absolute与position: relative混淆。

如果不确切知道自己想做什么，很难帮助你，但也许this article可以帮到你。

Answer 3

从我从提供的代码中收集到的内容，看起来您对每个元素默认应用的样式感到困惑。 li通常将margin和padding都设置为0，但推送由其父ul推出<{1}} {1}}的{1}}。要解决此问题，只需将padding-left的{{1}}属性设置为40px，将ul的{{1}}属性设置为padding-left。

Answer 4

...我希望第二个元素将第一个元素推出并移动本身就在屏幕的顶部...

如果您正在尝试根据选择的li来选择列表，则可以使用javascript轻松完成此操作，例如http://jsfiddle.net/qvLLM/1

如何推出第一个<li>元素并显示第二个元素而不隐藏第一个？</li>

4 个答案: