html css布局问题多多，下面这个ul的left:-40px,从哪来的？如果为0就会发现ul并不是紧贴贴着div1左侧的
<!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:400px;}
#div1{width:500px;height:200px;position:absolute;background:gray;top:50px;left:400px;}
ul li{width:30px;height:200px;border:1px solid red;float:left;}
ul{left:-40px;position:absolute;}
span{float:left;}
</style>
</head>
<body>
<div id='div1'>
<ul>
<li style='background:green'><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:400px;}
#div1{width:500px;height:200px;position:absolute;background:gray;top:50px;left:400px;}
ul li{width:30px;height:200px;border:1px solid red;float:left;}
ul{left:-40px;position:absolute;}
span{float:left;}
</style>
</head>
<body>
<div id='div1'>
<ul>
<li style='background:green'><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> 展开
1个回答
展开全部
因为ul 本身就是个块级元素，没有样式定义时它有圆点在项目的前面，会与div 边界有一定的距离，
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
