css - 显示 :inline-block not working

标签 css horizontal-scrolling

你知道在 tumblr 上,主页上的帖子是如何垂直滚动的吗?我想横向做。我知道我必须在某处使用某种类型的 display:inline 或 display:inline block 。我在我的body标签,邮箱标签里试过了,好像不行。

最佳答案

CSS 中的宽度与高度的工作方式并不完全相同,默认情况下,内容总是会在空白处中断以保持在其父级的宽度内。

但是,您可以使用 white-space: nowrap;

强制元素不包装它的任何子元素

这与 overflow-x: scroll; 结合将这些元素保持在一个漂亮的可滚动区域内,而不是将其容器的边界推出。

您使用 display: inline;display: inline-block; 使内容保持在同一行上是正确的。您也可以使用float 作为另一种选择,甚至是表格​​单元格显示属性,但这些应该更具体一些。

这是我整理的一个示例,希望这就是您所需要的:

http://jsfiddle.net/9xkPP/

关于css - 显示 :inline-block not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20832978/

相关文章:

javascript - 输入[type ='file' ] 标签名称

html - CSS 动画自动滚动文本问题

javascript - 如何水平滚动 DIV 到容器中心?

r - 在 R Shiny 应用程序中使用滚动条绘制大图

html - Horizo​​ntal Scrolling with Vertical Navbar - 向后滚动时导航栏下的内容

javascript - 我需要什么 CSS 规则来隐藏 "tr"元素,其子元素 "td"的子元素 "input"具有空值属性?

带有伪元素的 Html/Css 三 Angular 形

javascript - 使用javascript创建文本文件

iOS - 水平滑动项目

iphone - 如何实现多列、横向滚动的UITableView