发表于： 2016-06-29 20:53:49
1 1338
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin:0px;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>
今天学到不定宽块状元素水平居中，感觉顺风顺水，自认为盒子模型学的不错。无意间，我突发奇想，如果把li看作一个盒子，把外边距margin设置像素为0px，那么li盒子与li盒子之间会不会紧挨着呢？于是，我便动手了，可问题来了，当我设定margin为0px时候，li盒子间的距离虽然变小了，但是1，2，3也没挨着啊。我还特地给盒子加像素为1的红色实线边框验证。结果让我更迷茫了。
这是显示结果。求高手解惑。
返回列表
评论