The ul li in the div exceeds the width and is hidden, and the li does not wrap_html/css

The ul li in the div exceeds the width and is hidden, and the li does not wrap_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:06:10

Original

2031 people have browsed it

<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>

Copy after login

What I want to achieve is to arrange the li horizontally. Hide when the content of ul overflows the div. And when you click < and >, you can move ul to display the hidden content.

Now we add position to ul li. When the li content in ul overflows, it will not wrap but cannot be hidden. It can be hidden without adding position. But it will wrap.
Asking for advice from experts.

Reply to discussion (solution)

<!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>

Copy after login