div中ul li超出宽度隐藏且li不换行_html/css_WEB-ITnose-html教學-PHP中文網

div中ul li超出宽度隐藏且li不换行_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 12:06:10

原創

2031 人瀏覽過

<style>        ul        {            list-style-type: none;        }        li        {            float: left;            display: inline-block;            display: -moz-inline-stack;            display: inline;        }    </style><div style="width: 500px; margin: auto; border: 1px solid red; overflow: hidden;        line-height: 30px; height: 30px;">        <span style="float: left"><</span>        <ul>            <li>1111111111111111111</li>            <li>22222222222222</li>            <li>33333333333333333333</li>            <li>444444444</li>        </ul>        <span style="float: right">></span>    </div>

登入後複製

想要实现的是让li横向排列。当ul的的内容溢出div时隐藏。并且点击 <与 >时可以移动ul 显示出被隐藏的内容。

现在是给ul li 加上position ul中li内容溢出时不会换行但是也隐藏不掉。不加position 可以隐藏。但是会换行。
求教高手。

回复讨论(解决方案)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>无标题文档</title>    <style>	ul{margin:0;padding:0;}	li{list-style:none;}	.box{width: 500px; margin: auto; border: 1px solid red; overflow: hidden;line-height: 30px; height: 30px; position:relative;}	.box ul li{float:left;display:inline; vertical-align:top;height:30px;line-height:30px;padding:0 5px;}	.box ul {position: absolute;}	.box span{float:left;height:100%;line-height:30px;font-size:16px;background:#ccc;width:30px;text-align:center;}	.menu{float:left; width:440px;overflow:hidden; height:30px; position:relative;}		</style>    <script>	window.onload=function(){		var oBox=document.getElementById('box');		var aSpan=oBox.getElementsByTagName('span');		var oMenu=oBox.getElementsByTagName('div')[0];		var oUl=oMenu.getElementsByTagName('ul')[0];		var aLi=oUl.getElementsByTagName('li');		var iW=0;		for(var i=0;i<aLi.length;i++)		{			iW+=aLi[i].offsetWidth;		}		oUl.style.width=iW+'px';		aSpan[0].onclick=function()		{			var iLeft=oUl.offsetLeft+10;			iLeft>=0&&(iLeft=0);			oUl.style.left=iLeft+'px';		}		aSpan[1].onclick=function()		{						var iLeft=oUl.offsetLeft-10;			var maxLeft=oMenu.offsetWidth-oUl.offsetWidth;			iLeft<=maxLeft&&(iLeft=maxLeft);						oUl.style.left=iLeft+'px';		}	}    </script>    <body>    <div class="box" id="box">         <span class="prev"><</span>        <div class="menu">          <ul>            <li>1111111111111111111</li>            <li>22222222222222</li>            <li>33333333333333333333</li>            <li>444444444</li>            <li>55555</li>            <li>6666</li>            <li>777</li>          </ul>      </div>      <span class="next">></span> </div>      </body></html>

登入後複製