html中ulli的特效,html中 让 ul 的多个 li 在一行内显示，ulli

html中 让 ul 的多个 li 在一行内显示，ulli

有时候会需要ul的li都在同一行显示，避免li跑到下一行去，今天遇到了这个问题，记录下来，避免忘记~

Document

*{

padding: 0;

margin-bottom:0;

border: 0;

}

.box{

width: 640px;

height: 50px;

overflow-x: scroll;

overflow-y: hidden;

}

ul{

display:inline;

white-space: nowrap;

}

ul li{

padding: 10px 20px;

display: inline-block;

background:pink;

white-space:nowrap;

}

• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示
• 所有li都在一行显示

效果如下图：

随便写了下，好丑，不要在意细节哈哈哈~~~~

http://www.dengb.com/Javascript/1031304.htmlwww.dengb.comtruehttp://www.dengb.com/Javascript/1031304.htmlTechArticlehtml中 让 ul 的多个 li 在一行内显示，ulli 有时候会需要ul的li都在同一行显示，避免li跑到下一行去，今天遇到了这个问题，记录下来，避免...