html – 水平滾動的影象列表

我正在嘗試建立一個水平滾動列表.當Javascript啟用時,我將替換為一個花哨的版本,但是我希望在合理的現代瀏覽器中使用Javascript並且可以正常工作,而且Javascript(任何以任何方式使用Javascript的建議都是關閉的).

我目前的標記/ CSS工作,但這裡是我不喜歡的：

>當前標記指定非常寬的ul(即10000px)和一個在此滾動的容器.有沒有辦法避免這種情況,而是根據其內容擴大寬度(即藍色背景不應該在那裡)？

>有兩個額外的div(id#extra1,#extra2)只是為了造型目的.有沒有辦法消除這個額外的div？

>如果沒有足夠的影象來填充頁面寬度,則滾動條應該會摺疊,但是目前它不是因為我有一個非常寬的ul,不能崩潰.

><a>標籤由水平列表分隔,我最好想保持在一起.有沒有辦法讓他們靠近在一起,在CSS中乾淨地分開？

另外,你知道任何討論這種事情的教程嗎？我已經看到幾個教程,演示了整個頁面滾動,我從中提取了一些想法,但我找不到任何演示滾動的ul / ol元素.

額外的資訊可能有幫助：

>頁面的寬度是靜態的(即它不是流體/彈性佈局).

>頁面中的影象是從PHP動態生成的,影象數量可以改變.

>縮圖的寬度是明確的.

剝離例項：360/horiz.html" rel="nofollow,noindex" target="_blank">http://dl.dropbox.com/u/17261360/horiz.html

這適用於我,在Firefox 4 beta 10中測試,建議在IE中測試它：

<ul class="images">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

CSS中的訣竅是設定lis顯示：inline,因此它們被視為字元並放置在彼此的旁邊,並在ul上設定空格：nowrap,以便不會執行換行.滾動然後簡單地是overflow-x：auto,其餘的是顯而易見的：

ul.images {
margin: 0;
padding: 0;
white-space: nowrap;
width: 900px;
overflow-x: auto;
background-color: #ddd;
}
ul.images li {
display: inline;
width: 150px;
height: 150px;
}

Live example here

新增上一個/下一個按鈕可以通過position：absolute或者float：left,或者你想要的任何其他方法來完成.