強制水平列表100％寬度

Question

我有自定義滑塊坐在我的頁面頂部，但我有一些問題。我希望列表項能夠伸展到屏幕的寬度，但我遇到了問題，因爲列表項顯示在另一個下面。我已經將它們設置爲浮動狀態，並且我有一個隱藏溢出的列表，但無濟於事。

我希望它使得當前幻燈片是屏幕的寬度無論大小，可能具有960像素

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> 

希望這會幫助你。