2

我遇到了一个非常令人沮丧的问题。我正在努力创建一个位于<ul>. 当嵌套<div>在表格中display: {fixed,absolute}时，空格占位符会显示在另一个表格单元格的位置。我不明白为什么或如何绕过它。

代码的 CodePen 在这里：http ://codepen.io/quicksnap/pen/gsHrb你可以切换最顶层的类来看看我在说什么。

了解有关为什么或如何保留此标记结构并使其显示固定/绝对而不更改父表显示的任何见解。

标记：

<ul>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <div class="fixed"/>
</ul>

CSS：

/*
 Why does the display: table show an empty placeholder for
 an element inside that is position: fixed/absolute?
*/

/* Comment out/remove !important to see bug */
.fixed { display: none !important; }

.fixed { 
  display: block;
  position: fixed; top: 60px; left: 0;
  width: 100%; height: 100px;
  background: salmon;
}

ul {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 60px;
  display: table;
  table-layout: fixed;
  position: relative;
  background: #ccc;
}

ul > li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
4

3 回答 3

1

我真的不知道这是一个错误还是预期的行为（我没有研究过），因为它似乎在正常table元素上做同样的事情。但是，它显然与table-layout: fixed正在设置的属性有关。我猜这是因为table-layout: fixed它根据列数计算它的大小，并且它似乎在页面渲染时将其计算为“列元素”，显然甚至在认识到cssposition: fixed将其拉出流程之前。display: none导致元素不计入列目的（正如人们所期望的那样）。

您的问题似乎可以通过让table（在您的情况下ul）成为table-layout: auto然后将单元格（您的li）设置为适当的宽度（在您的情况下为 25%）来解决，除非它们都具有完全相同的宽度文本。

table有关在正常元素上发生的所有这些事情的说明，请参见this fiddle 。

div附带说明一下， a中的裸元素ul不是有效的 html 结构（ul应该只有li元素作为直接子元素）。

于 2012-12-13T20:03:26.023 回答
0

你的 div / 固定类的目的是什么？但是，您可以嵌套另一个 ul 或列表并将“固定”类放在上面。如果您添加高度 100%，那么整个背景就是您拥有的鲑鱼色。

于 2012-12-13T20:02:56.477 回答
0

似乎display: table将在固定布局中呈现子元素，无论它们的显示是否设置为absolute-fixed如果它们显示为块元素，则绘制单元格。

这是“错误”的简化版本：

http://codepen.io/quicksnap/pen/xuDwG（注意 Lorem 项右侧的额外空间）

当使用table-captionfor anli然后嵌套在固定或绝对元素中时，它似乎使元素免于被绘制为单元格。

这是我正在寻找的一个例子：http: //codepen.io/quicksnap/pen/noBvm

感谢 ScottS 指出我的无效 HTML——它让我了解了它为什么会这样工作，尽管我仍然不明白为什么表格正在为一个不是table-cell并且定位为绝对/固定的元素绘制一个单元格空间。

于 2012-12-13T21:03:52.083 回答