Question

我很好奇我的造型是什么造成了这个问题。我在每个colcontainer中有三列，所有<li>都互相混淆，就像它的位置：绝对一样。我只是希望它们像往常一样垂直堆叠。有人有什么想法吗？

CSS：

#slider .colcontainer {
    width: 600px;
    height: 200px;
    background: red;
    float: left;
    padding: 0;
    margin: 0;
}
#slider .col1 {
    width: 30%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    background: blue;
    float: left;
    position: relative;
}
#slider .col1 ul {
    list-style: none;
    padding: 0;
    float: none;
}

HTML：

<div class="colcontainer">
                    <div class="col1">
                        <ul>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                        </ul>
                    </div>
                    <div class="col1">
                        <ul>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                        </ul>
                    </div>
                    <div class="col1">
                        <ul>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                        </ul>
                    </div>
                </div>

Answer 1

您的代码中没有#slider，因此不会应用您的样式。

http://jsfiddle.net/EZx3b/

.colcontainer {
    width: 600px;
    height: 200px;
    background: red;
    padding: 0;
    margin: 0;
}
.col1 {
    width: 30%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    background: blue;
    float: left;
    overflow: auto;
}
.col1 ul {
    list-style: none;
    padding: 0;
}

Answer 2

我首先要设置：

#slider li {
  display:block;
  position:static;
}

如果这不起作用，您应该检查Firebug或Chrome Inspector中的元素，看看哪些规则覆盖了它并弄乱了显示。

Answer 3

我将您的colcontainer包裹到另一个div#slider，但到目前为止没有任何问题。三列有三个项目。

请参阅JSFiddle

列表项目在同一位置呈现而不是垂直/水平

3 个答案: