了解 CSS 表格单元格和百分比宽度

Question

我正在检查 Github 如何显示以下菜单：

如果您注意到，每个菜单项的宽度相同。在 CSS 中，我们应该给它任何百分比值，这背后的原因是什么？注意父 div 没有给出 display: table 属性。

div {
  border: 1px solid #000;
  border-radius: 4px;
}

div ul {
  padding: 0;
  margin: 0;
}

div ul li {
  display: table-cell;
  width: 1%;
  text-align: center;
  border-right: 1px solid #000;
  padding: 10px 0;
}

div ul li:last-child {
  border-right: 0;
}

<div>
  <ul>
    <li><a href="#">Commits</a>
    </li>
    <li><a href="#">Branch</a>
    </li>
    <li><a href="#">Contribution</a>
    </li>
    <li><a href="#">anything</a>
    </li>
  </ul>
</div>

百分比宽度背后的原因是什么？

Answer 1

这与automatic table layout 的工作方式有关。特别是：

列宽的百分比值是相对于表格宽度的。如果表格具有“宽度：自动”，则百分比表示对列宽度的约束，UA 应尝试满足该约束。 （显然，这并不总是可能的：如果列的宽度为 '110%'，则无法满足约束。）

在您的情况下，您在每个表格单元格元素上设置了一个很小的百分比宽度。但是浏览器需要确保表格单元格填满表格的宽度（表格本身与其包含块一样宽），因此它必须扩展单元格以尽可能多地占据表格内的空间。

这导致单元格宽度大致相等的原因是所有单元格的百分比值都相等。例如，如果您为其中一个单元格设置稍大的宽度，您会看到它变得更宽，而其他单元格变得更窄以适应：

div {
  border: 1px solid #000;
  border-radius: 4px;
}

div ul {
  padding: 0;
  margin: 0;
}

div ul li {
  display: table-cell;
  width: 1%;
  text-align: center;
  border-right: 1px solid #000;
  padding: 10px 0;
}

div ul li:first-child {
  width: 3%;
}

div ul li:last-child {
  border-right: 0;
}

<div>
  <ul>
    <li><a href="#">Commits</a>
    </li>
    <li><a href="#">Branch</a>
    </li>
    <li><a href="#">Contribution</a>
    </li>
    <li><a href="#">anything</a>
    </li>
  </ul>
</div>

但是，请注意略有不同，因为某些单元格的内容比其他单元格长，并且在计算单元格宽度时会考虑此内容的长度。

之所以使用小到 1% 的值，是为了让您可以继续添加单元格，而浏览器仍会尝试尽可能均匀地分配可用宽度。您实际上是在告诉单元格，它们至少不需要一定的宽度，以便您可以添加（虽然从技术上讲，1% 仍然是某事）。

没有分配任何元素display: table 的事实是无关紧要的，因为将在表格单元格周围生成一个匿名表格包装器，以便它们可以正确呈现。这个匿名表格包装器的功能与带有display: table 的无样式元素完全相同，这意味着表格宽度是自动的，用于计算单元格宽度百分比。

Answer 2

这就是所谓的 1% 宽度表格技巧。

这是因为表格单元格从父 div 继承了它的宽度，允许您指定单元格宽度的相关百分比。

这是 CodePen 上的工作演示，您可以使用它并进一步检查。

http://codepen.io/ld0rman/pen/FCiLh

    <ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>  

CSS：

  ul {
 list-style-type: none; 
 margin: 100px auto;
  width: 80%;
 }

 li {
   display: table-cell; 
   width: 1%;
    text-align: center;
    }

      a {
     display: block;
        border: 1px solid black;
      padding: 25px;
      text-decoration: none;
      color: white;
   text-transform: uppercase;
font-weight: bold;
background: grey;

 &:hover {
text-decoration: none; 
color: yellow;
background: darken(grey, 10%);
  }
   }

如您所见，它的编码类似于您的 github 示例。还有什么问题，尽管问！