允許溢出X

我的代碼如下：允許溢出X

#under { 
    width: 100%; 
    height: 50px; 
    background-color: #D4D4D4; 
    border: none; 
    -webkit-box-shadow: inset 0px 0px 4px 0px #000000; 
    -moz-box-shadow: inset 0px 0px 4px 0px #000000; 
    box-shadow: inset 0px 0px 4px 0px #000000; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 
#under ul { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
} 
#under ul li { 
    min-width: 100px; 
    height: 40px; 
    margin-top: 10px; 
    margin-left: 10px; 
    float: left; 
    background-color: #999; 
    display: block; 
}

基本上，我有與它裏面li元素的#under DIV。我希望他們'溢出'的容器，以便它可以在X軸上滾動，但我不能爲我的生活找出如何做到這一點！

它將使li元素顯示在彼此之下。

任何幫助表示讚賞，謝謝！

編輯：活生生的例子https://babblebox.me/mobile/

來源

2011-11-08 Oyed

*「我希望他們'溢出'的容器，以便它可以在X軸上滾動，但我不能爲我的生活弄清楚爲什麼。」* - 你不能f明白爲什麼你想這樣做？ ;） – Polynomial

無論如何，我想你錯過了你的一句話。究竟是什麼問題？ – Polynomial

您正在使用哪種瀏覽器？此屬性在IE8及更早版本中不起作用。 –

他們仍然在下，因爲它是浮動的，因爲寬度：100％它調整大小的屏幕可用大小不div。

基本上我想你應該添加到UL一些寬度

我的意思是：

#under ul { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    width: 8000px; 
}

來源

2011-11-08 11:35:13 Kokers

完美工作，謝謝！ – Oyed

-1

嘗試#underoverflow: auto;？

來源

2011-11-08 11:30:03

不，沒什麼，他們仍然在彼此之下：https：//babblebox.me/mobile/ – Oyed

ahhh然後忽略我的答案。我會在下次回答之前測試一些東西 –

您可以隨時滾動元素的直接子。您可以像Kokers所說的那樣製作一個非常寬的<ul>，或者如我所願，可以在<ul>上應用滾動樣式。

#under {                                                   
    width: 100%; 
    height: 50px; 
    background-color: #D4D4D4; 
    border: none; 
    -webkit-box-shadow: inset 0px 0px 4px 0px #000000; 
    -moz-box-shadow: inset 0px 0px 4px 0px #000000; 
    box-shadow: inset 0px 0px 4px 0px #000000; 

} 
#under ul { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 
#under ul li { 
    min-width: 100px; 
    height: 40px; 
    margin-top: 10px; 
    margin-left: 10px; 
    background-color: #999; 
    display: inline-block; 
}

*注：我在float: left; display: block變更爲display: inline-block在#under ul li

在這裏你可以看到它在行動：http://jsfiddle.net/rvt5N/

來源

2011-11-08 11:43:02 Ashnur

你必須做出#under的寬度小於它，比你的溢出效果，並給像素的寬度...

來源

2011-11-08 13:43:07

回答

相關問題