html - 强制水平列表 100% 宽度

Question

我的页面顶部有自定义 slider ，但我遇到了一些问题。我希望列表项能够拉伸(stretch)到屏幕的宽度，但我在强制执行此操作时遇到了问题，因为列表项显示在彼此下方。我已将它们设置为 float ，我有一个围绕列表的 div，隐藏了溢出但无济于事。

我想要它，以便当前幻灯片无论大小如何都是屏幕的宽度，最小宽度可能为 960px

HTML

<div id="slider">
    <div class="slides">
        <ul>
            <li class="slide">
                one
            </li>
            <li class="slide">
                two
            </li>
            <li class="slide">
                three
            </li>
        </ul>
    </div>
</div>

CSS

#slider {
    position:relative;
    margin:0 auto;
    top:85px;
    width:100% !important;
}

.slides {
    margin:0 auto;  
    overflow:hidden;
    text-align:center;
    position:relative;
    left:0;
}

.slide {
    height:630px;
    width:100%;
    float:left;
    position:relative;
}

Answer 1

试试这个...
添加如下所示的 css 类。

.ul_class {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}  

之后，将这个新类 ( ul_class ) 分配给您的 <ul>像这样。

<ul class="ul_class">
    ...
    ...
    ...
</ul>  

希望对您有所帮助。