html - List Items being rendered in the same spot instead of vertically/horizontally

Question

I'm curious as to what in my styling is causing this issue. I have three columns in each colcontainer, and all the <li>s are jumbling into each other like it was position: absolute. I just want them to stack vertically like they normally do. Anyone have any ideas?

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

You don't have #slider in your code, so your styles are not applied.

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