您的位置：首页 > 其它

display:table在自动获取实际宽度的作用

2017-11-28 00:00 106 查看

问题引入：经常能看到这种面板界面，如图

当点击不同的选项时，显示不同的内容。
通常，导航项（图中红色）部分要求是居中。
既然要居中，我们肯定想到，左右margin设置为auto即可。
但是margin:auto居中实现的前提是导航项部分给定宽度。使用margin:auto居中代码举例如下：

<html>
<style>
ul{
width:500px;
margin: 0 auto;
}
</style>
<body>
<ul>
<li><a>全部</a></li>
<li><a>Word</a></li>
<li><a>Excel</a></li>
<li><a>PPT</a></li>
</ul>
</body>
</html>

这里，ul的宽度500px只是举例，实际上应该是其下每一个li元素的宽度之和。这样才能实现居中。
但是这样会有一个问题。首先，设置宽度就不好。我们很不喜欢指定一个元素的宽度，除非它真得不太会变。这里显然不是这样。假如以后要再加一个选项，比如加入access、visual basic等怎么办？那就得重写计算所有li元素的宽度，然后改变ul元素的宽度，否则超出ul宽度的li元素就会掉到第二行去显示。
那么如何才能让ul的宽度自动为li元素宽度之和呢？可能有人说，不设置ul的宽度，或者设置ul的宽度为auto。这样是是不行的：不设置宽度，则ul作为块级元素是占满整个一行的；设置为auto无效（默认值就是auto）。
在不考虑使用JS的情况下，还有一种实现方法，就是浮动。浮动会自动对元素进行压缩，压缩成它实际内容所占的宽度。给ul设置为左浮动后，ul的宽度就是li元素的宽度之和了。但是，此时还能使ul居中吗？不行了。为什么？你都左浮动或者右浮动了，还怎么‘居中’啊？这不是矛盾吗。
所以，以上都是不正确的做法。到底该怎么实现居中而又不限制死宽度呢？
方法：
给ul设置display：table

<style>
ul{
display:table;
width:auto;
margin: 0 auto;
}
</style>

这样，就实现了居中，且不会出现上述宽度限制死的问题。当然，这里设置width:auto不重要，有无均可。
什么意思呢？将ul的布局方式改为table，那ul下的li元素当然是作为单元格内容咯。一个table的宽度是多少呢？当然是内部单元格宽度之和。所以给ul设置了table，这样ul的宽度就会自动变成li元素宽度之和。这不就是我们要的吗？有了ul宽度，我们自然可以设置居然，使用margin:auto即可。
记住了哦。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： table布局居中

相关文章推荐

新的分享

章节导航