最简单的CSS等效于两列单行表

Question

此HTML代码最简单的CSS等效是什么：

<table><tr><td>
One<br>
Two
</td><td>
Three<br>
Four
</td></tr></table>

背景：

我被要求修改广泛使用CSS的现有网站。我对CSS的了解充其量是基本的，但是所要求的更改相当简单，主要是文本编辑。但是，一项编辑涉及添加一个子弹列表，该列表太长了，无法适合其分配的区域。我决定使用一个表将其分解为两个列表，但是当我输入基本的HTML表时，它被向下偏移了几行，并以不同于其余段落的字体显示。因此，有什么方法可以用CSS制作一个"表"，该CSS可以继承该区域的所有属性(或划分正确的术语(？

Answer 1

也许您正在寻找下面的示例。

display: flex将并排对齐儿童物品。通过将flex-grow: 1应用于这些孩子，他们将生长到相等的宽度以适合父容器。

我们还可以将<ul>用于无序列表，每个<li>代表一个项目符号。

结果基本上与单行两列表格相同，其中任何一个单元格。

.table-div {
    display: flex;
}
.table-div > div {
    border: 1px solid black;
    flex-grow: 1;
}

<div class="table-div">
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
</div>

Answer 2

您可以做我下面发布的事情。然后，您可以将宽度调整为您需要的方式。

#table {
  width: 600px;
}
#table ul {
  width: 50%;
}
#table ul li {
  float: left;
  width: 50%;
}

<div id="table">
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>

Answer 3

这是我可以得到的"最简单"。使用Flexbox的flex-direction和flex-wrap属性，您可以制作无序列表桥式两个列的单个"列"。您需要调整ul的max-height和li s的width，以确保值按照您想要的方式包装。

.table-list {
  margin: 0;
  padding: 0;
  text-indent: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 3rem;
}
.table-list li {
  list-style-type: none;
  width: 50%;
}

<ul class="table-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>