水平制作li元素堆栈 [英] Make li elements stack horizontally

问题描述

* li1 * li2 * li3 我需要以下li以水平方式彼此堆叠。 c $ c



而不是：



  * li 
 * li 
 * li 
  

在右边被隐藏，并根据需要滚动。

以下是

解决方案

• 添加另一个处理其内容滚动的容器


• 让 li 为 display：inline-block 在 ul white-space：nowrap
>所以 li 元素将保留在其狭窄容器中的一行上

http://jsfiddle.net/EvilOatmeal/nxGG2/ 2 /

I need the following li to stack against each other in a horizontal fashion like so:

*li1 *li2 *li3

instead of:

 * li
 * li
 * li

Pretty much the li elements would be aligned like a gallery with the lis to the right being hidden and scrolled as needed.

Here is the JSFiddle

解决方案

• Add another container that handles the scrolling of its content
• Make the li be display: inline-block so they'll stack next to each other
• Set white-space: nowrap on the ul so the li elements will stay on one line in its narrow container

http://jsfiddle.net/EvilOatmeal/nxGG2/2/

这篇关于水平制作li元素堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！