css设计li一行排列，溢出部分不换行 [ 备忘记录 ]

工作上遇到过两次该问题，导致耽误了不少时间。这次记录下，已备下次再忘记。

想要的效果如下：

--------------分割线---------------------------

html结构如下：

<div>
    <ul>
        <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>
        <li>新板待测</li>
    </ul>
</div>

P.S.一开始想的是不要最外层的div标签来实现，后来发现那样不对，根本没法实现！

-------------------------分割线-------------------------------

CSS样式如下：

<style type="text/css">
		ul{
			list-style: none;
			height: 20px;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
			background-color: brown;
			
			width:5000px;
		}
		
		ul li{
			float:left;
			background-color: chocolate;
		}
		
		div{
			overflow: hidden;
			width: 220px;
			height: 20px;
			background-color: black;
			padding: 0px;
			margin: 0px;
		}
	</style>

在CSS样式里，就是普通的横向排序。但最关键的语句不是网上说的什么设置display:block、display:inline或是white-space: nowrap等（不管给ul或li设置都一样无效）；

只是需要给ul设置宽度，大于外层div的宽度，就能实现想要的效果！

本人一开始没想到这，总主观认为li已经设置浮动向左，那应该就是一条直线，没想到ul的宽度是默认随上级宽度来指定的。

这里发个帖子做个备忘，也希望能帮助后来者。