javascript 宽度的问题，不固定写定DIV宽度。

Question

CSS写了滚动条，但是一定要写死了< ul >的宽度为200%才行，这个如果内容长度不定的话，就不灵活了，
javascript 如果实现自动判断啊，如何实现不写死 < ul >的宽度，而是根据内容自动判断。

 <div class="navabox">
<div class="amnav"><ul>         
<li>文字1</li>            
<li>文字2</li>        
<li>文字3</li>    
<li>文字4</li>    
<li>文字5</li>    
<li>文字6</li>    
</ul>           
</div>
</div>
<style type="text/css">
.navabox {height: 69px;line-height:39px;overflow: hidden; width:160px; background: #fff; position: relative;}
.amnav {overflow-y: hidden; overflow-x: scroll;-webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch;height:69px;width: 100%;}
.amnav ul {white-space: nowrap;height:69px; width: 200%;}
.amnav li { width:16%; text-align: center;float: left;list-style-type:none;}
</style>

Answer 1

li不用定百分比宽度，计算总li宽度，定百分比就会依据容器来得到i的宽度了

  <div class="navabox">
<div class="amnav"><ul>         
<li>文字1</li>            
<li>文字2</li>        
<li>文字3</li>    
<li>文字4</li>    
<li>文字5</li>    
<li>文字6</li>    
<li>文字7</li>    
<li>文字8</li>    
<li>文字9</li>    
<li>文字10</li>    
<li>文字11</li>    
<li>文字12</li>    
</ul>           
</div>
</div>
<style type="text/css">
.navabox {height: 69px;line-height:39px;overflow: hidden; width:160px; background: #fff; position: relative;}
.amnav {overflow-y: hidden; overflow-x: scroll;-webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch;height:69px;width: 100%;}
.amnav ul {white-space: nowrap;height:69px;}
.amnav li { text-align: center;float: left;list-style-type:none;padding:0 5px;}
</style>
<script>
    var ul = document.querySelector('.amnav ul'),l=0;
    ul.style.width =(Array.prototype.slice.call( ul.getElementsByTagName('li')).forEach(function(el){l+=el.offsetWidth}),l+5)+'px';
</script>