Question

我试图创建一个包含大量细节的CSS徽章。内容是这样的。

**General Details:** 
ID no(6digit number)
Date of Joining
Group
Sub Group

**Personal Details**
Name
Date of Birth
Gender
**Referrer Details**
Name of Referrer
URI
and so on

我尝试使用＆lt; ul＆gt; ＆LT;李＆GT;然后设置样式，然后我尝试使用div和span，但是我无法获得一致的外观。最后我不得不去找一张桌子。现在至少数据看起来是统一的，但我很生气，因为我使用表格来表示非表格数据。有没有一种简单的方法可以用CSS设计结构化布局？

Answer 1

有没有简单的设计方法结构化布局与CSS？

只有在你投入时间之后，才真的。 CSS 似乎简单，但使用其原语来组成复杂的布局需要一些练习并熟悉各种渲染引擎的怪癖。它比以前更容易，grid systems可以提供帮助，但即使它们需要一些投资。没有royal road。

如果您不必支持IE 6＆amp; 7，您可能会使用CSS display rules（值为table-cell，table-row和table）。这将为你提供很多没有标记的表格式布局行为。

但值得注意的是，使用表格标记进行非表格标记确实不是crossing the streams或其他任何内容。很多关于语义丢失的手铐被夸大了。至少从1999年开始，Lynx已经能够使用heuristics to make distinctions between layout and semantic tables。有些屏幕阅读器也会这样做。这是有道理的，真的 - 如果我们一直在等待桌面布局消失之前我们有可以使用它们的用户代理，我们就会开始。如果你使用它，你不必感到内疚，你不会阻止语义网或者在脸上踢盲人。 CSS定位是一种工具，它通常是一个很好的工具，但如果它不符合您的目标以及您手头的技能/资源，请随意使用表格标记。

但是，如果您确实使用表格标记，我建议在其上添加class="layout"。它提供了一些句柄，用于将一些表格样式放入样式表中，向其他开发人员发出您正在做的信号，甚至可能使用户代理更容易在某一天进行语义/布局区分。另外，不要嵌套表。如果你真的尝试的话，你几乎总能避免它，虽然可以用表格来清理，易于阅读和编辑标记，但如果你筑巢，你最终会遇到邪恶和咆哮的可能性会大大增加。

Answer 2

您绝对可以将每个元素定位到所需的位置：

li.general {
position:absolute;
top: 10px;
left: 20px;
}
...

Answer 3

我认为这些数据足够表格放入表格，只有自命不凡的开发者会抱怨，最终用户永远不会知道差异。如何，制作CSS布局不应超过47分钟。 http://giveupandusetables.com/

我不应该使用表

3 个答案: