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

时间 2019-12-26

标签 display table 自动获取实际宽度栏目 CSS 繁體版

原文原文链接

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

当点击不一样的选项时，显示不一样的内容。布局

一般，导航项（图中红色）部分要求是居中。spa

既然要居中，咱们确定想到，左右margin设置为auto便可。code

可是margin:auto居中实现的前提是导航项部分给定宽度。使用margin:auto居中代码举例以下：htm

<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元素的宽度之和。这样才能实现居中。table

可是这样会有一个问题。首先，设置宽度就很差。咱们很不喜欢指定一个元素的宽度，除非它真得不太会变。这里显然不是这样。假如之后要再加一个选项，好比加入access、visual basic等怎么办？那就得重写计算全部li元素的宽度，而后改变ul元素的宽度，不然超出ul宽度的li元素就会掉到第二行去显示。class

那么如何才能让ul的宽度自动为li元素宽度之和呢？可能有人说，不设置ul的宽度，或者设置ul的宽度为auto。这样是是不行的：不设置宽度，则ul做为块级元素是占满整个一行的；设置为auto无效（默认值就是auto）。方法

在不考虑使用JS的状况下，还有一种实现方法，就是浮动。浮动会自动对元素进行压缩，压缩成它实际内容所占的宽度。给ul设置为左浮动后，ul的宽度就是li元素的宽度之和了。可是，此时还能使ul居中吗？不行了。为何？你都左浮动或者右浮动了，还怎么‘居中’啊？这不是矛盾吗。im

因此，以上都是不正确的作法。到底该怎么实现居中而又不限制死宽度呢？margin

方法：

给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便可。

记住了哦。