等高列与CSS

小编典典

等高列与CSS

html

我想在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>

阅读 729

2020-05-10

共1个答案

小编典典

这是一个使用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>

2020-05-10