html - 创建调色板时遇到问题

Question

对于我的元素，我正在创建一个允许用户绘画的应用程序。

我设法创建了 Canvas 和画笔，并且已经知道如何使用 Javascript 和 Jquery。

我遇到的唯一问题是创建调色板。

HTML

<div id = "colors">
    <div style="background: #990000;"></div>
    <div style="background: #CC0000;"></div>
    <div style="background: #CC3300;"></div>
    <div style="background: #FFCC00;"></div>
    <div style="background: #FFFF00;"></div>
    <div style="background: #CCFF00;"></div>
    <div style="background: #66FF00;"></div>
    <div style="background: #003300;"></div>
    <div style="background: #33FFCC;"></div>
    <div style="background: #3300CC;"></div>
    <div style="background: #660033;"></div>
    <div style="background: #660066;"></div>
    <div style="background: #000000;"></div>
    <div style="background: #ffffff;"></div>
</div>

application.css

#colors {
  width: 180px;
  height: 30px;
}

我创建了一个 fiddle

http://jsfiddle.net/fqfbprd7/1/

如果我向 div 添加一些文本，就像我在 fiddle 中所做的那样，我会看到渲染的颜色，但它们都在各自的行上。类似于paint，这应该是一个颜色选择框，每行有7种颜色。不过只有颜色，没有文字。

我什至为我的颜色 div 设置了 width 和 height 属性，以呈现一个颜色框。

Answer 1

这里是更新的 fiddle :

http://jsfiddle.net/fqfbprd7/2/

#colors div {
   width: 25px;
   height: 30px;
    float: left;
 }