水平内容

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%;}​