为了账号安全,请及时绑定邮箱和手机立即绑定

1、padding为0,右面却出现空白。2、padding值改为10,只有左面有空白。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{text-align:center;border:1px solid red;}
.container ul{list-style:none;margin:0;padding:0;display:inline;border:1px solid red;}
.container li{margin-right:8px;display:inline;border:1px solid red;}
</style>
</head>

<body>
<div class="container">
    <ul>
    	<li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</html>

如上代码所示,我在课堂案例的基础上给各个边框加了颜色,1、发现3框后面一直有空白?此时padding的值不是0吗?应该没有空白的呀?2、当我把.container ul中padding的值改为10时,只有1框的左面出现了10px的空白,而上右下却没有出现空白?这又是为什么呢?

正在回答

3 回答

.container li{margin-right:8px;}这条不需要吧?


0 回复 有任何疑惑可以回复我~
#1

昵称是JaVa 提问者

不需要。我加上它只是为了测试和理解概念用的。
2017-10-08 回复 有任何疑惑可以回复我~

如果看不明白,直接用浏览器的开发者工具看盒模型 应该更容易理解!

http://img1.sycdn.imooc.com//589ffca40001da2008680888.jpg

0 回复 有任何疑惑可以回复我~
#1

昵称是JaVa 提问者

用了开发者工具,可还不是明白为什么加了padding=10后,只有左边出现了空白。而且我看开发者工具在此处报了一个 不可用属性值 的警告,不明白为什么会这样。
2017-10-08 回复 有任何疑惑可以回复我~

因为你给ul和li加了边框,li又有margin-right,所以li的边框后面是margin-right的那8px!因为li的margin又撑大了ul的宽度,所以ul的边框和最后一个li的边框形成了一段空白空间!

0 回复 有任何疑惑可以回复我~
#1

昵称是JaVa 提问者

明白了,感谢。
2017-02-12 回复 有任何疑惑可以回复我~
#2

昵称是JaVa 提问者

但是,为什么当我把ul的padding改成10的时候,只有左边增加了空格呢?按照你对问题1的解释,li的marginleft没有赋值,会默认为0,左边将又变为空格啊。
2017-02-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

1、padding为0,右面却出现空白。2、padding值改为10,只有左面有空白。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信