cari

Rumah >hujung hadapan web >html tutorial >div中ul li超出宽度隐藏 且li不换行_html/css_WEB-ITnose

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

WBOY
WBOYasal
2016-06-24 12:06:102066semak imbas

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：div 居中_html/css_WEB-ITnoseArtikel seterusnya：公司选举，打算弄个html来唱票，请帮帮忙！_html/css_WEB-ITnose

Artikel berkaitan

Lihat lagi