解决方法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不换行

ul

{

list-style-type: none;

}

li

{

float: left;

display: inline-block;

display: -moz-inline-stack;

display: inline;

}

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

现在是 给ul li 加上position ul中li内容溢出时 不会换行 但是也隐藏不掉。 不加position 可以隐藏。但是会换行。

求教高手。

------解决方案--------------------

无标题文档

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

window.οnlοad=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].οnclick=function()

{

var iLeft=oUl.offsetLeft 10;

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

oUl.style.left=iLeft 'px';

}

aSpan[1].οnclick=function()

{

var iLeft=oUl.offsetLeft-10;

var maxLeft=oMenu.offsetWidth-oUl.offsetWidth;

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

oUl.style.left=iLeft 'px';

}

}