等高列与CSS

• Z时代
• 2024-01-10
• 分类：问答

我想在CSS表中使用百分比。不幸的是，它对我不起作用。

此代码有什么问题？我应该使用flexbox代替表吗？

我想使用表格，因为我想要相同的高度列。

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}
li {
  width: 50%;
  display: table-cell;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

回答：

这是一个使用ul/ li元素的示例，2列使用百分比，并且具有相等的高度。

由于表格更喜欢表格/行/单元格的布局，因此我对HTML进行了一些重组。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.table {
  display: table;
  width: 90%;
  height: 60%;
  padding-top: 5%;
  margin: 0 auto;
}
ul {
  display: table-row;
  list-style: none;
  margin: 0;
}
li {
  display: table-cell;
  width: 50%;
  border: 1px solid #999;
}
<div class="table">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

以上是 等高列与CSS 的全部内容， 来源链接： utcz.com/qa/418722.html