设置元素的left 会改变元素的大小是为什么?????

jaedongjuly 2015-09-11 10:40:21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>Insert title here</title>
<style type="text/css">

body{
margin: 0px;
padding: 0xp;
}

ul{
margin: 0px;
padding: 0px;
}
li{
margin: 0px;
padding: 0px;
list-style-type: none;
}

#nav{
border:1px solid orange;
width: 465px;
height: 52px;
margin: 50px auto 0 auto;
position: relative;

}
.nav_bg{

width: 85px;
height: 52px;
position: absolute;
background-color:red;
left:0px;
}

#nav ul li{
/*
float: left;
width: 85px;
height: 52px;
*/
}

.white{
border:1px solid black;
position: absolute;
color:orange;
left:0px;
}
</style>
</head>
<body>
<div id="nav">
<div class="nav_bg" >
<ul class="white" >
<li>首页</li>
<li>博文列表</li>
<li>精彩相册</li>
<li>动感音乐</li>
<li>关于我</li>
</ul>
</div>
</div>
</body>

当改变 .white 的
.white{
border:1px solid black;
position: absolute;
color:orange;
left:0px;//改为 100px或-100px 元素表现的效果不一样
}
...全文
435 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
jaedongjuly 2015-09-24
  • 打赏
  • 举报
回复
引用 4 楼 zyb112211 的回复:
[quote=引用 3 楼 jaedongjuly 的回复:] 设置元素的left 会改变元素的大小是为什么?????
我想应该是你.white是相对于.nav_bg浮起来的,然后你.nav_bg元素又设置了宽度,你.white元素如果设置left:100px的话,就超出了他父级的宽度,自然就缩小了。 你给他设置left值,是要相对于他的父级元素的,你不能超出他父级元素,你子元素又没有设置宽度,当然就越级越小。 就相当于,把一个可变的盒子放在另一个不可变的盒子里,你把里面的盒子死劲往右边挤,于是越挤越小,最后小到不能再小时,就把外面的盒子挤破了,里面的盒子就跑出来了[/quote] 不好意思还是没有太明白,left我理解是定位用的???? 还有这段css,提问的时候这里加了注释,忘记该类 #nav ul li{ float: left; width: 85px; height: 52px; } 。
纯洁袜子 2015-09-24
  • 打赏
  • 举报
回复
引用 5 楼 jaedongjuly 的回复:
[quote=引用 4 楼 zyb112211 的回复:] [quote=引用 3 楼 jaedongjuly 的回复:] 设置元素的left 会改变元素的大小是为什么?????
我想应该是你.white是相对于.nav_bg浮起来的,然后你.nav_bg元素又设置了宽度,你.white元素如果设置left:100px的话,就超出了他父级的宽度,自然就缩小了。 你给他设置left值,是要相对于他的父级元素的,你不能超出他父级元素,你子元素又没有设置宽度,当然就越级越小。 就相当于,把一个可变的盒子放在另一个不可变的盒子里,你把里面的盒子死劲往右边挤,于是越挤越小,最后小到不能再小时,就把外面的盒子挤破了,里面的盒子就跑出来了[/quote] 不好意思还是没有太明白,left我理解是定位用的???? 还有这段css,提问的时候这里加了注释,忘记该类 #nav ul li{ float: left; width: 85px; height: 52px; } 。 [/quote]如果是这样子的话,就不会改变大小了啊,你已经设死了他的宽度了,你再怎么设left值他都是那么宽
纯洁袜子 2015-09-16
  • 打赏
  • 举报
回复
引用 3 楼 jaedongjuly 的回复:
设置元素的left 会改变元素的大小是为什么?????
我想应该是你.white是相对于.nav_bg浮起来的,然后你.nav_bg元素又设置了宽度,你.white元素如果设置left:100px的话,就超出了他父级的宽度,自然就缩小了。 你给他设置left值,是要相对于他的父级元素的,你不能超出他父级元素,你子元素又没有设置宽度,当然就越级越小。 就相当于,把一个可变的盒子放在另一个不可变的盒子里,你把里面的盒子死劲往右边挤,于是越挤越小,最后小到不能再小时,就把外面的盒子挤破了,里面的盒子就跑出来了
jaedongjuly 2015-09-16
  • 打赏
  • 举报
回复
设置元素的left 会改变元素的大小是为什么?????
jaedongjuly 2015-09-14
  • 打赏
  • 举报
回复
引用 1 楼 gy127132060 的回复:
你把ul放在了nav_bg,,,nav_bg你设置了宽度啊。。。。。我也是醉了。。。
我是一个新手,不是很明白。 left是一个定位使用的属性, 可是为什么,会改变元素的大小????
香蕉猪 2015-09-11
  • 打赏
  • 举报
回复
你把ul放在了nav_bg,,,nav_bg你设置了宽度啊。。。。。我也是醉了。。。

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧