qq_34571911 2018-10-11 03:03 采纳率: 80%
浏览 888
已采纳

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条回答 默认 最新

  • 斯洛文尼亚旅游 2018-10-11 04:32
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 设计一个光控计数器,全部用ttl芯片
  • ¥15 vscode platformio
  • ¥15 代写uni代码,app唤醒
  • ¥15 全志t113i启动qt应用程序提示internal error
  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部