qq_34571911
2018-10-11 11:03
采纳率: 92.7%
浏览 884
已采纳

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

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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

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>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题