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

Question

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

  

列宽的百分比值是相对于表格宽度的。如果表格的宽度为：auto＆＃39;，则百分比表示列宽度的约束，UA应尝试满足该约束。 （显然，这并不总是可行的：如果列的宽度为＆＃39; 110％＆＃39;，则无法满足约束。）

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

使用小到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示例类似。还有其他问题，请你离开！