一个奇怪的div的定位和大小

Question

我最近遇到的问题似乎很容易解决，但我无法理解。

我正在创建一个样式swicher，因此我包含了一个不同颜色的列表和另一个div colorClwicher连接到插件。 我不明白为什么，尽管div在列表之后，却出现了第一个。 考虑到它的大小，有一个宽度比例。

如何将其插入另一个之后？最重要的是，我想了解为什么会产生这种影响..

提前致谢

html是

<div id="option">
    <ul>
        <li id="blue" class="color"></li>
        <li id="red"class="color"></li>
        <li id="yellow" class="color"></li>
    </ul>
    <div id="colorSelector"><div></div></div>
</div>

css是

#colorSelector {
position: relative;
max-width: 36px;
height: 36px;
background: url(../images/select.png);
}

#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(../images/select.png) center;
}

对于所有代码：http://jsfiddle.net/zh3sL/

我添加了另一个具有相同ID的div，以显示其宽度如何涉及整个屏幕，即使它设置为36px

我试图消除这个位置，但结果不是最好的

我希望有人能理解并能帮助我。

再次提前谢谢

Answer 1

假设li是浮动的并且ul没有清除浮动，那么如何放置溢出：隐藏在ul上？

此外，＃colorSelector上的绝对位置不会对你有任何好处。要么浮动，要么将其作为显示块（没有浮动或绝对位置）。

Answer 2

您可以尝试从“#colorSelector”和“#colorSelector div”选项中删除“position”属性。然后你可以为它们添加“float：left”。另外添加“padding：0;”到“ul”。