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

記住了哦。