Question

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

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

背景：

我被要求修改广泛使用CSS的现有网站。我对CSS的了解至多是基本的，但所要求的更改相当简单，主要是文本编辑。但是，一次编辑涉及添加一个太长而不适合其指定区域的项目符号列表。我决定使用一个表将它分成两个列表，但是当我输入一个基本的HTML表时，它向下偏移了几行，并以不同于段落其余部分的字体显示。那么，有没有办法可以制作一张桌子＆＃34;使用CSS将继承该区域的所有属性（或DIV是正确的术语）吗？

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属性，可以使无序列表的单个“列”桥接两列。您需要调整max-height的{{1}}和ul的{{1}}，以确保值以您希望的方式进行包装。

width

li

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

3 个答案: