首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

解决ul宽度超出div宽度常用解决办法

建站高手 2015-4-24 [DIVCSS] 来自手机 复制链接
46825
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
有朋友问我ul宽度超出div宽度怎么办呢?在设计网页的时候,有时候会遇到ul超出div宽度,遇到这种<ul>宽度超出<div>宽度的时候,通常有两种解决方法,下面一起来看看解决办法吧。

解决方法1:

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

解决方法2:

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

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


例子

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


  1. <style>

  2.         ul

  3.         {

  4.             list-style-type: none;

  5.         }

  6.         li

  7.         {

  8.             float: left;

  9.             display: inline-block;

  10.             display: -moz-inline-stack;

  11.             display: inline;

  12.         }

  13.     </style>

  14. <div style="width: 500px; margin: auto; border: 1px solid red; overflow: hidden;

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

  16.         <span style="float: left"><</span>

  17.         <ul>

  18.             <li>1111111111111111111</li>

  19.             <li>22222222222222</li>

  20.             <li>33333333333333333333</li>

  21.             <li>444444444</li>

  22.         </ul>

  23.         <span style="float: right">></span>

  24.     </div>
复制代码


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

现在是 给ul li 加上position ul中li内容溢出时 不会换行 但是也隐藏不掉。 不加position 可以隐藏。但是会换行。
求教高手。
------解决方案--------------------
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3.     <head>

  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  5.     <title>无标题文档</title>

  6.     <style>

  7.     ul{margin:0;padding:0;}

  8.     li{list-style:none;}

  9.     .box{width: 500px; margin: auto; border: 1px solid red; overflow: hidden;line-height: 30px; height: 30px; position:relative;}

  10.     .box ul li{float:left;display:inline; vertical-align:top;height:30px;line-height:30px;padding:0 5px;}

  11.     .box ul {position: absolute;}

  12.     .box span{float:left;height:100%;line-height:30px;font-size:16px;background:#ccc;width:30px;text-align:center;}

  13.     .menu{float:left; width:440px;overflow:hidden; height:30px; position:relative;}

  14.    

  15.     </style>

  16.     <script>

  17.     window.onload=function(){

  18.         var oBox=document.getElementById('box');

  19.         var aSpan=oBox.getElementsByTagName('span');

  20.         var oMenu=oBox.getElementsByTagName('div')[0];

  21.         var oUl=oMenu.getElementsByTagName('ul')[0];

  22.         var aLi=oUl.getElementsByTagName('li');

  23.         var iW=0;

  24.         for(var i=0;i<aLi.length;i++)

  25.         {

  26.             iW+=aLi[i].offsetWidth;

  27.         }

  28.         oUl.style.width=iW+'px';

  29.         aSpan[0].onclick=function()

  30.         {

  31.             var iLeft=oUl.offsetLeft+10;

  32.             iLeft>=0&&(iLeft=0);

  33.             oUl.style.left=iLeft+'px';

  34.         }

  35.         aSpan[1].onclick=function()

  36.         {

  37.             

  38.             var iLeft=oUl.offsetLeft-10;

  39.             var maxLeft=oMenu.offsetWidth-oUl.offsetWidth;

  40.             iLeft<=maxLeft&&(iLeft=maxLeft);

  41.             

  42.             oUl.style.left=iLeft+'px';

  43.         }

  44.     }

  45.     </script>

  46.     <body>

  47.     <div class="box" id="box">

  48.         <span class="prev"><</span>

  49.         <div class="menu">

  50.           <ul>

  51.             <li>1111111111111111111</li>

  52.             <li>22222222222222</li>

  53.             <li>33333333333333333333</li>

  54.             <li>444444444</li>

  55.             <li>55555</li>

  56.             <li>6666</li>

  57.             <li>777</li>

  58.           </ul>

  59.       </div>

  60.       <span class="next">></span> </div>

  61.       </body>  

  62. </html>
复制代码



上一篇:css设置背景固定不滚动效果的示例
下一篇:10分钟学会理解和解决MySQL乱码问题
小米淘 发表于 2015-5-2 16:18:42 来自PC
生气了,无法HOLD啦 >_<......
362938688 发表于 2015-5-20 14:46:45 来自PC
看看解决办法。。我就是学习进步了
www.yandaoqingxi.cn|www.jjjnews.top|www.bjxdc2001.com|www.chejixiu.net|www.gchb001.com|www.seoh.cn网站推广
lelegoer 发表于 2015-5-21 15:32:53 来自PC
感恩无私的分享与奉献
miyukong.com yihaojiayuan,.com howdian.com
AAA.jacksen 发表于 2015-7-17 09:51:41 来自手机
确实很强大,支持一下。
来自: 微社区
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表