水平內容

Question

我的問題是如何使動態內容水平顯示。這意味着沒有垂直滾動，只有水平。我試過-webkit-column-count，但它只創建X列，但不是水平滾動。有什麼建議麼？

Answer 1

您可以使用CSS

white-space: nowrap; 

但你必須要小心把換行符在您想要的地方，否則你會用一個很長的文本行結束。 http://jsfiddle.net/Nbkj2/1/

Answer 2

這是一個相當開放式的問題，因爲我敢肯定有很多的方法來回答這個問題，但也許這將指向你在一個有用的方向：http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/

總結文章中，您將您的內容分解成一系列全屏頁面。每個頁面都是一個帶有CSS的div，佔據整個屏幕，具有高度/寬度屬性和float:left;，以使它們全部橫向堆疊。爲防止頁面環繞，文檔的主體與所有頁面一樣寬：body { width:10000px; }

然後，作者在鏈接上放置了一些javascript處理程序，以將頁面橫向滾動到每個內容面板。

Answer 3

取決於水平的元素和你的意思。以下是我認爲你的意思的兩個例子。

div { 
    Width:20%; 
    Display:inline-block; //won't work for ie 8 and below 
} 
body { 
    width: 150%; 
} 

Answer 4

像這樣的演示（HTML CSS添加只）

DEMO：http://jsfiddle.net/enve/ea88y/

FROM：http://www.visibilityinherit.com/code/horizontal-website.php

HTML

<ul> 
<li><a href="#one">ONE</a></li> 
<li><a href="#two">TWO</a></li> 
<li><a href="#three">THREE</a></li> 
<li><a href="#four">FOUR</a></li> 
<li><a href="#five">FIVE</a></li> 
</ul> 

<div id="wrap"> 
<div id="one"><p>ONE</p></div> 
<div id="two"><p>TWO</p></div> 
<div id="three"><p>THREE</p></div> 
<div id="four"><p>FOUR</p></div> 
<div id="five"><p>FIVE</p></div> 
</div> 

</body> 
</html>​ 

CSS

* { 
margin:0; 
padding:0; 
} 
html { 
height:100%; 
overflow-x:scroll; 
} 
body { 
height:100%; 
} 
#wrap { 
min-height:100%; 
width:500%; 
overflow:hidden; 
} 
#one, #two, #three, #four, #five { 
width:20%; 
float:left; 
} 
ul { 
position:fixed; 
width:100%; 
height:40px; 
line-height:40px; 
text-align:center; 
background:#ccc; 
} 
li { 
display:inline; 
margin:0 50px; 
} 
p { 
margin:50px; 
text-align:center; 
} 
* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');} 
* html {background:url(fake.jpg)} 
* html #full {height:100%;}​