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

Question

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

我正在创建一个样式切换器，因此我包含了一个具有不同颜色的列表和另一个连接到插件的 div colorSwicher。我不明白为什么，尽管 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”选择中删除“位置”属性吗？然后你可以为它们添加“float:left”。还要添加“填充：0；” 为“ul”。