0

我正在尝试在 html 中使用 ul 标记创建表格视图。在链接中,我使用了两个 li 标签来创建两列。我使用了两张图片来展示 li 标签使用的空间,列点和行点。我提供了 html、css 和两个图像文件。

图片

点列 点行 我得到的布局截图

index.html -> http://pastebin.com/d8nq8pfr
style.css -> http://pastebin.com/V7iR3ZqE

现在,如果您看到由提供的文件创建的布局,您可以看到表格布局的第二行具有不规则的高度。两个高度都来自不同的 ul 标签。

所以我的问题是,有什么方法可以使两者的高度相同(显然最高的应该被认为是相同的高度;))?

4

2 回答 2

0

Seriously consider whether this is tabular data - and if so, use <table>, <tr>, <td>, etc. Tables aren't evil, they just shouldn't be used for things that aren't tables. And the word "table" has a pretty broad definition... even using them for structuring forms isn't incorrect (although probably a bit of a semantic grey area).

However, if you decide that semantically this really is an unordered list, you can use the CSS table model to display elements "tabularly", by applying display: table, display: table-row and display: table-cell styles to the elements which could otherwise be <table>, <tr> and <td> elements respectively. See that link for the full set of values. These aren't supported in older browsers, mind (IE7 and earlier).

If you have to support IE7 (or even, god forbid, IE6), you'll have to resort to column layout patterns, which have thousands of articles dedicated to them around the internet.

于 2012-09-23T14:21:25.303 回答
0

如果这是表格数据,它应该在表格中。您可以使其他元素表现得像有一些限制的表(没有行跨度/列跨度等):

#title1, #title2 {
    display: table-cell;
}

这在 IE7 或更早版本中不起作用。

于 2012-09-23T14:12:29.027 回答