了解 CSS table-cell 和百分比宽度

Question

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

如果您注意到，每个菜单项的宽度都相等。在CSS中，我们应该给它任何百分比值，这背后的原因是什么？请注意，父级 div 未显示：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

这就是所谓的 1% 宽度 table hack。

这是因为 table 单元格从父级 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 示例。还有什么问题，尽管提问！

Answer 2

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

A percentage value for a column width is relative to the table width. If the table has 'width: auto', a percentage represents a constraint on the column's width, which a UA should try to satisfy. (Obviously, this is not always possible: if the column's width is '110%', the constraint cannot be satisfied.)

在您的例子中，您在每个 table-cell 元素上设置了一个极小的百分比宽度。但是浏览器需要确保 table-cells 填满 table 的宽度（它本身与其包含块一样宽），因此它必须扩展单元格以占据尽可能多的 space 尽可能在 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: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 的事实是无关紧要的，因为将在 table 单元格周围生成匿名 table 包装器，以便它们可以正确呈现。这个匿名 table 包装器的功能与具有 display: table 的无样式元素完全相同，这意味着 table 宽度在计算单元格宽度百分比时是自动的。

了解 CSS table-cell 和百分比宽度

Understanding CSS table-cell and percentage width

html

css

css-tables