Question

我在网站上有几页我需要允许用户从颜色列表中选择颜色。该列表从数据库加载，并且可以包含任意数量的颜色。控件的确切大小取决于页面。我知道有很好的插件可用于选择颜色，但我是根据设计构建的。（阅读：我不能使用第三方控件）

我在这里使用表格编写了一个有效的解决方案（http://jsfiddle.net/Cfj4T/1/）。此示例的主要目的是显示我可以通过在容器上设置宽度来更改整个颜色选择的宽度：

div.select-large {
    width: 560px;
}

div.select-small {
    width: 280px;
}

问题是：这是对表的错误使用吗？有没有一种解决方案可以在＆＃34; a＆＃34;上使用css？而不是标签或div元素？那会是什么样的？

注意 - 这个例子是由angular生成并复制到JSFiddle中的，因此不要过多地阅读＆＃34; a＆＃34;中的额外属性。标签

在一个地方的所有选项 - 如果有人想看到答案到目前为止我已将它们全部放入原始JSFiddle（http://jsfiddle.net/Cfj4T/6/）。他们的工作非常好，感谢所有人！

Answer 1

请勿将<table>用于表格数据以外的任何内容。

原因是现在您可以使用现代CSS获得表格式布局的所有好处，并且您的文档在语义上是正确的，这对于诸如屏幕阅读器之类的工具来说是很好的。

用使用display: table和display: table-cell的元素替换表格和表格单元格，您将获得具有更好标记的相同结果。

这是一个jsFiddle示例：http://jsfiddle.net/r9AgB/1/

如果您必须支持不使用display: table-cell的旧版浏览器，请根据所需的数量在<a>元素上设置百分比宽度。 CSS支持小数百分比值（1.234％）。

Answer 2

绝对不是。这是“使用表格进行布局”的典型案例，这通常表示无知更好的手段 - 不是说这是一件坏事，只是意味着你需要学习的东西;）

使用<span>（或<a>）代替display:inline-block。对这些元素应用百分比宽度，以便您可以继续动态调整容器的宽度（百分比应为(100 / number_of_spans)，这可以很容易地计算出来）