html+css布局问题，怎么让li被鼠标移入宽度变大的时候，相邻的li不被挤到下面去？
<!DOCTYPEHTML><html><head><title></title><styletype='text/css'>#div2{width:1px;height...
<!DOCTYPE HTML>
<html><head><title></title>
<style type='text/css'>
#div2{width:1px;height:800px;background:red;position:absolute;top:250px;left:900px;}
#div1{width:500px;height:200px;position:absolute;background:gray;top:50px;left:400px;}
li{width:30px;height:200px;border:1px solid red;float:left;}
ul{left:0px;position:absolute;float:left;height:200px;}
span{float:left;width:30px;}
</style>
<script type='text/javascript' src='move.js' charset='utf-8'></script>
<script language='javascript'>
window.onload=function()
{
var odiv1=document.getElementById('div1');
var ali=odiv1.getElementsByTagName('ul')[0].getElementsByTagName('li');
var aspan=[];
for (var i=0;i<ali.length;i++)
{
aspan[i]=ali[i];
aspan[i].index=i;
aspan[i].onmouseover=function ()
{
for(i=0;i<ali.length;i++)
{
}
move(ali[this.index],{width:330})
}
}
}
</script>
</head>
<body>
<div id='div1'>
<ul>
<li style='background:green;top:50px'><span>第一列</span></li>
<li><span>第二列</span></li>
<li style='background:red'><span>第三列</span></li>
<li><span>第四列</span></li>
<li style='background:yellow'><span>第五列</span></li>
</ul>
</div>
<div id='div2'>
</div>
</body>
</html> 展开
<html><head><title></title>
<style type='text/css'>
#div2{width:1px;height:800px;background:red;position:absolute;top:250px;left:900px;}
#div1{width:500px;height:200px;position:absolute;background:gray;top:50px;left:400px;}
li{width:30px;height:200px;border:1px solid red;float:left;}
ul{left:0px;position:absolute;float:left;height:200px;}
span{float:left;width:30px;}
</style>
<script type='text/javascript' src='move.js' charset='utf-8'></script>
<script language='javascript'>
window.onload=function()
{
var odiv1=document.getElementById('div1');
var ali=odiv1.getElementsByTagName('ul')[0].getElementsByTagName('li');
var aspan=[];
for (var i=0;i<ali.length;i++)
{
aspan[i]=ali[i];
aspan[i].index=i;
aspan[i].onmouseover=function ()
{
for(i=0;i<ali.length;i++)
{
}
move(ali[this.index],{width:330})
}
}
}
</script>
</head>
<body>
<div id='div1'>
<ul>
<li style='background:green;top:50px'><span>第一列</span></li>
<li><span>第二列</span></li>
<li style='background:red'><span>第三列</span></li>
<li><span>第四列</span></li>
<li style='background:yellow'><span>第五列</span></li>
</ul>
</div>
<div id='div2'>
</div>
</body>
</html> 展开
展开全部
css里面给div1一个很大的宽度，然后给div1外面再套个div0之类的东西，并把div0的宽度设置为现在div1的宽度，然后给div0的css加上：overflow: hidden;
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
