html - 两列单行表的最简单 CSS 等价物？

Question

此 HTML 代码的最简单 CSS 等价物是什么:

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

背景:

有人要求我修改一个广泛使用 CSS 的现有网站。我对 CSS 的了解充其量只是基本知识，但所请求的更改相当简单，主要只是文本编辑。但是，一项编辑涉及添加一个元素符号列表，该列表太长而无法放入其分配的区域。我决定使用一个表格将它分成两个列表，但是当我输入一个基本的 HTML 表格时，它向下偏移了几行，并以与该段落其余部分不同的字体显示。那么，有没有一种方法可以用 CSS 制作一个“表格”，它将继承它所在区域的所有属性(或者 DIV 是正确的术语)？

Answer 1

也许您正在寻找类似于下面示例的内容。

display: flex将并排对齐子元素。通过申请 flex-grow: 1对于这些 child ，他们将增长到相等的宽度以适应父容器。

我们也可以使用<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>