Home > Article > Web Front-end > The ul li in the div exceeds the width and is hidden, and the li does not wrap_html/css_WEB-ITnose
The ul li in the div exceeds the width and is hidden, and the li does not wrap_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:06:102029browse
<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> What I want to achieve is to arrange the li horizontally. Hide when the content of ul overflows the div. And when you click 709755eb0d440af414163d2e5288b1b1, 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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：div centered_html/css_WEB-ITnoseNext article：div centered_html/css_WEB-ITnose