Question

为什么下面示例中的单元格应该只覆盖表宽度的一半时完全拉伸？

我查看了许多类似问题的stackoverflow帖子，但他们的答案都不适合我。这反映在下面的代码集示例中。

我之所以尝试使用table / table-cell，是因为我将拥有可变高度的元素。我不能使用浮动来上下锯齿，我不想为元素设置最小/最大高度。

ul {
  border: 1px solid black;
  display: table;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

ul li {
  border: 1px solid black;
  display: table-cell;
  width: 25%;
}

<ul>
  <li>This is a cell</li>
  <li>This is a cell</li>
</ul>

Answer 1

如果您想模仿tr / td，我相信将{ul}标签显示为flex可以完成这项工作。此外，可以使用css flex属性

设置li标签的宽度

ul {
  border: 1px solid black;
  display: table;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

ul li {
  border: 1px solid black;
  flex:0 0 25%;
  margin:0;
  border:solid red;
}
ul{
  position:relative;
  display:flex;
  list-style-type:none;
}
li{
  
}

<ul>
  <li>This is a cell</li>
  <li>This is a cell<br><br>addsd</li>
</ul>

显示未遵守的表格单元格宽度百分比

1 个答案: