CSS让DIV里面的LI超出DIV的宽度时不段行问题。。

如题，我想写一段代码，让一个DIV里面的LI在超出DIV设定的宽度时不段行显示要怎么写要。我按百度上提供的方法写出来始终不对。谢谢各位大神哈；
比如我设置的DIV宽度是540PX。而LI的个数有10个；每个LI的宽度是100PX；我想要让这些LI在一行显示；而不是超过DIV宽度的时候断行显示；求大神指教；
下面是我的代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin:0px;
                padding:0px;
            }
            .gun_box1{
                width:540px;
                height:100px;
                background-color:#998811;
                position:relative;
                margin:300px auto;
                overflow:hidden;
            }
            .gun_box1 ul{
                position:absolute;
                top:0;
                left:0;
                
            }
            .gun_box1 ul li{
                float:left;
                margin-right:10px;
                width:100px;
                height:100px;
                background-color:#118833;
                list-style-type:none;
                white-space:nowrap;
            }
        </style>
        
        <script>
            window.onload = function(){
                var odiv_box1 = document.getElementById('odiv_1');
                var oul_box1 = odiv_box1.getElementsByTagName('ul')[0];
                var oli_box1 = oul_box1.getElementsByTagName('li');
                oul_box1.innerHTML = oul_box1.innerHTML + oul_box1.innerHTML;
            }
        </script>
    </head>
    <body>
        <div class="gun_box1" id="odiv_1">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </body>
</html>

1给li加上display:inline-block;属性
2给ul加上可以容纳li的宽度

我想楼主要的是这种效果，这种布局是轮播图的基础。
我是按楼主的代码改的，不需要的已经注释掉了
http://codepen.io/liuzhenbase/pen/eJNWWj

1，要不断行又要显示出来overflow必须为visible，同时无论是浮动还是正常的文档流，在超出宽度之后都会默认挤到下面去，所以我目前想到的就是用绝对定位来控制才能让它超过宽度的情况下不断行。具体参考演示

【热门文章】