主页 / 问题 / 802594
Accepted
E_K
Asked:2020-03-21 21:00:02 +0000 UTC2020-03-21 21:00:02 +0000 UTC

display: table-cell 在这个例子中是如何工作的？

  • 772

为什么，如果给定元素表格单元格和 1% 的宽度，它们之间是否共享父元素的整个宽度？为什么，当窗口大小减小时，第一个元素上会出现难以理解的填充，从而将其向下移动？

.nav {
  list-style: none;
  border: 1px solid #eaeaea;
  height: 60px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.nav__item {
  display: table-cell;
  width: 1%;
}
.nav__item:not(:last-child) {
  border-right: 1px solid #eaeaea;
}
.nav__item-link {
  width: 100%;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
<ul class="nav">
  <li class="nav__item"><a href="#" class="nav__item-link">Link 1 222222</a></li>
  <li class="nav__item"><a href="#" class="nav__item-link">Link 2</a></li>
  <li class="nav__item"><a href="#" class="nav__item-link">Link 3</a></li>
  <li class="nav__item"><a href="#" class="nav__item-link">Link 4</a></li>
  <li class="nav__item"><a href="#" class="nav__item-link">Link 5</a></li>
</ul>

css

1 个回答

  1. Best Answer

    1. 因为属于表格某一行的所有表格单元格占用了该行整个宽度的总和。在这种情况下，父母。

    2. 因为正在发生以下情况：

      1. （第一个元素的）单元格的内容被传输到第二行。
      2. 第一个元素的高度增加，这导致相邻单元格的高度增加。
      3. “不可理解的填充”隐式地为尺寸大于初始设置的单元格添加浏览器。
      4. 向下偏移是由于默认的 vertical-align = baseline 并且所有单元格的内容都沿基线相互对齐 - 第一行文本字母的底部边缘，不包括标注。

    设置样式vertical-align:middle，例如，你会看到什么是什么。

    • 0

相关问题