0

私のスタイリングの何がこの問題を引き起こしているのか興味があります。各 colcontainer に 3 つの列があり、<li>position: absolute のようにすべての s が互いにごちゃ混ぜになっています。通常のように垂直に積み重ねたいだけです。誰にもアイデアはありますか？

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>
4

3 に答える 3

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;
}
于 2013-01-29T21:42:12.060 に答える
0

私は設定することから始めます：

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

それでもうまくいかない場合は、Firebug または Chrome Inspector で要素を検査し、どのルールがそれを上書きして表示を台無しにしているかを確認する必要があります。

于 2013-01-29T21:40:47.840 に答える
0

あなたcolcontainerをさらに別のにラップしましdiv#sliderたが、今のところ問題はありません。3 つのアイテムを含む 3 つの列。

JSFiddleを参照してください

于 2013-01-29T21:43:52.773 に答える