2 qq 34571911 qq_34571911 于 2018.10.11 19:03 提问

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个回答

showbo
showbo   Ds   Rxr 2018.10.11 20: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>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
左边div固定宽度,右边div宽度自适应
http://www.zhihu.com/question/37208845 body{ padding: 0px; margin: 0px; } .wrap{ width: 100%; height:500px; background:red; }
DIV+CSS实现两边固定宽度,中间自适应宽度
DIV+CSS实现两边固定宽度,中间自适应宽度-天魅设计博客 body{ margin:0; padding:10px;} #head{ margin-bottom:10px; height:50px; background-color:#999999} #main{} #left{ width:200px; float:left;margin-right:-200px; background-
总结几种实现右边宽度固定,左边宽度自适应的css布局
一.display:table-cell的应用首先是简单的html:下面是css代码:          以下是效果图:必须注意的是,左侧div必须设置超过父元素减去右侧元素的宽度   但是这个方法会产生一个问题,它会使左边的div高度等于右侧div的高度 二.flex布局同样使用上面的htmldai'ma下面是css代码效果图如下:可以看到左侧的没有设置宽度,但是却跟右侧的宽度一致,实现了宽度自...
宽度不固定上下水平居中
想要实现宽度不固定的div上下水平居中这里介绍三种实现方法1,flex&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt;
CSS-两侧固定宽度,中间自适应的三列布局
在实际开发中,左右两侧固定宽度,中间自适应的三列布局是经常能够遇到的,尤其是最近的一个项目中,属于微信公众号,移动端的网页。在部分页面中,就需要用到这种布局,我是采用flex布局来搞定的。为了总结一下相关的知识,特意在网上收集了几篇相关的文章。 这种布局,主要是通过两类技术原理来实现的: 基于margin来实现; 基于CSS3中的弹性布局flex属性来实现; 绝对定位的方法这种方法,其实原理很简单
div左右两端固定div,中间百分百宽度
自己总结了一下 1、左侧固定,右侧自适应  2、右侧固定,左侧自适应 3、左右两侧固定,中间自适应     左侧固定,右侧自适应 width: 200px;float: left margin-left: 201px 右侧固定,左侧自适应 width: 200px;float: left margin-left:
两个div并排 左边div宽固定 右边自适应
实现两个div,左边固定div宽度200px,右边div自适应 /*方法一: BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .left{ width:200px;height:100%;background
不固定宽和高的div 水平和垂直都居中
在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。 如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况,我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,
实现一个div,左边固定div宽度200px,右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应&lt;div class= &quot;container&quot;&gt; &lt;div class=&quot;left&quot;&gt;&lt;/div&gt; &lt;div class=&quot;rigth&quot;&gt;&lt;/div&gt; &lt;/div&gt;&lt;style&gt; /*方法一: BFC(块级格式化上下文)*/ .container{ width:10
css实现左边div固定宽度,右边div自适应撑满剩下的宽度
(1)使用float class="use-float"> .use-float>div:first-child{ width:100px; float:left; } .use-float>div:last-child{ overflow:hidden; } - - - - - - - - - - - - - - -