[解决 两不愁三保障 突出问题座谈会]解决ul宽度超出div宽度常用解决办法

更新时间:2019-09-19    来源:英文短信    手机版     字体:

【www.bbyears.com--英文短信】


在设计网页的时候,有时候会遇到ul超出div宽度,遇到这种宽度超出宽度的时候,通常有两种解决方法:

解决方法1:

给ul一个样式:margin:0px; padding:0px; overflow:hidden;

解决方法2:

给li一个样式: word-break:break-all; word-wrap:break-word;

.ncad {width:1000px;overflow:hidden; margin:0 auto;}
.ncad ul{list-style-type:none;width:100%;margin:0px; padding:0px; overflow:hidden; }
.ncad li{ width:333px; float:left;margin-bottom:2px;}

例子

div中ul li超出宽度隐藏 且li不换行





        line-height: 30px; height: 30px;">

        <

       

            1111111111111111111

            22222222222222

            33333333333333333333

            444444444

       

        >

   


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

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




   

   

    无标题文档

   

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

            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>

   

   

        <

       

         

            1111111111111111111

            22222222222222

            33333333333333333333

            444444444

            55555

            6666

            777

         

     

      >

       

本文来源:http://www.bbyears.com/zhufuduanxin/68682.html