div 内の ul li は幅を超えているため非表示になり、li はラップされません_html/css

div 内の ul li は幅を超えているため非表示になり、li はラップされません_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:06:10

オリジナル

2066 人が閲覧しました

<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 に位置を追加します。ul の li コンテンツがオーバーフローすると、ラップされませんが、非表示にすることはできません。位置を追加せずに非表示にすることができます。しかし、それは包みます。
専門家にアドバイスを求めてください。

ディスカッションへの返信 (解決策)

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

ログイン後にコピー