右侧登录框的div向左填充30像素有效果，但是查看发现填充前后的宽度没有变化

<!DOCTYPE html>

<html>

<head>

*{margin:0px;padding:0px;}

body{min-width: 900px;}

.header,.footer{width: 100%;height: 100px;color: white;background-color: black;float: left;}

.header .logo{float: left;}

a{color: white;text-decoration: none;}

.header .rightsiderba ul{float: right;}

.header .rightsiderba ul li{float: left;list-style: none;height: 100px;line-height: 100px;margin-left: 50px;margin-right: 50px;}

.header .rightsiderba{overflow: hidden;}

.container{padding: 0 350px 0 370px;}

.left,.middle,.right{position: relative;float: left;min-height: 800px;}

.middle{width: 100%;background-color: rgb(255,192,203);}

.left{width: 370px;background-color: rgb(255,239,219);}

.right{width: 350px;background-color:rgb(173,216,230)}

.left{margin-left: -100%;left: -370px;}

.right{margin-left: -350px;right:-350px;}

.footer ul {text-align: center;}

.footer ul li{display: inline-block;list-style: none;height: 100px;line-height: 100px;margin-left: 100px;text-align: center;}

.container .left ul li a{color: black;}

.container .left ul li{text-align: left;list-style: none;}

.container .left ul{}

.introduce{width: 293px;margin:0px auto;margin-top: 250px;line-height: 17px}

h1{height:40px;}

span{background-color: rgb(251,156,157);}

.right ul{border: 1px red solid;padding-left:30px }

.right ul li{list-style: none;}

.submit{

width:300px;

height:50px;

background-color:#f00;

border:none;

cursor:pointer;

color:white;

font-size:20px;}

input{height: 40px;width: 300px;font-size: 15px;}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

</div>

<ul>

<li><span>职业路径</span> HTML5与CSS3实现动态网页</li><br/>

<li><span>职业路径</span> 零基础入门Andriod语法与界面</li><br/>

<li><span>职业路径</span> IOS基础语法与常用控件</li><br/>

<li><span>职业路径</span> PHP入门开发</li><br/>

<li><span>职业路径</span> JAVA入门开发</li><br/>

</ul>

</div>

<form>

<ul>

</ul>

</form>

</div>

<ul>

</ul>

</div>

</body>

</html>

qq_初闻陌小瑞_0 2018-09-11

源自：CSS网页布局基础 3-3 编程练习

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-09-11 18:36:51

同学指的是ul的总宽度没有变化吗 ,如下:

因为元素的总宽度包括 : 元素的content( 也就是css中设置的width) + padding( 填充) +border . 填充是包括在总宽度里面的 , 如果元素没有设置content的宽度width , 并设置了padding , 那么总宽度不会变化 , 它会挤掉contet的宽度 , 也就是说 , 总宽度350px , 没有padding时 , content宽度350px :

设置padding后 , content宽度变小 :

希望解答了你的疑惑 ,祝学习愉快 ! 望采纳

收起回答

qq_初闻陌小瑞_0 提问者 #1

老师为啥我给.right 也就是包含登录框的那个DIV设置内填充，.right宽度就会变化囊，而且会被挤下来。为啥给ul内填充内容就会缩短整体宽度不变。

2018-09-11 21:05:02
好帮手慕夭夭回复提问者 qq_初闻陌小瑞_0 #2

老师在解释中提到了 "元素没有设置content的宽度width" , 那么设置padding后它会自动挤掉content的宽度 , 总宽度就不会变化了 . 同学所说的right会变化是因为right设置了宽度哦 , 也就是说content设置了宽度 , padding就不会去挤掉content的宽度了 , 这时候总宽度就变大了哦

2018-09-12 09:32:29
qq_初闻陌小瑞_0 提问者回复好帮手慕夭夭 #3

多谢老师懂了

2018-09-12 13:33:49